For example, both of the imports are necessary in this code, even though React and CustomButton are not directly referenced from JavaScript:

import React from 'react';import CustomButton from './CustomButton';
function WarningButton() {
  // return React.createElement(CustomButton, {color: 'red'}, null);  return <CustomButton color="red" />;
}
For example, both of the imports are necessary in this code, even though React and CustomButton are not directly referenced from JavaScript:

import React from 'react';import CustomButton from './CustomButton';
function WarningButton() {
  // return React.createElement(CustomButton, {color: 'red'}, null);  return <CustomButton color="red" />;
}
You cannot use a general expression as the React element type. If you do want to use a general expression to indicate the type of the element, just assign it to a capitalized variable first. This often comes up when you want to render a different component based on a prop:

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // Wrong! JSX type can't be an expression.  return <components[props.storyType] story={props.story} />;}
To fix this, we will assign the type to a capitalized variable first:

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // Correct! JSX type can be a capitalized variable.  const SpecificStory = components[props.storyType];  return <SpecificStory story={props.story} />;}
You can also refer to a React component using dot-notation from within JSX. This is convenient if you have a single module that exports many React components. For example, if MyComponents.DatePicker is a component, you can use it directly from JSX with:

import React from 'react';

const MyComponents = {
  DatePicker: function DatePicker(props) {
    return <div>Imagine a {props.color} datepicker here.</div>;
  }
}

function BlueDatePicker() {
  return <MyComponents.DatePicker color="blue" />;}
To fix this, we will rename hello to Hello and use when referring to it:

import React from 'react';

// Correct! This is a component and should be capitalized:function Hello(props) {  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
  return <div>Hello {props.toWhat}</div>;
}

function HelloWorld() {
  // Correct! React knows <Hello /> is a component because it's capitalized.  return <Hello toWhat="World" />;}
For example, this code will not run as expected:

import React from 'react';

// Wrong! This is a component and should have been capitalized:function hello(props) {  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
  return <div>Hello {props.toWhat}</div>;
}

function HelloWorld() {
  // Wrong! React thinks <hello /> is an HTML tag because it's not capitalized:  return <hello toWhat="World" />;}
Normally, JavaScript expressions inserted in JSX will evaluate to a string, a React element, or a list of those things. However, props.children works just like any other prop in that it can pass any sort of data, not just the sorts that React knows how to render. For example, if you have a custom component, you could have it take a callback as props.children:

// Calls the children callback numTimes to produce a repeated component
function Repeat(props) {
  let items = [];
  for (let i = 0; i < props.numTimes; i++) {    items.push(props.children(i));
  }
  return <div>{items}</div>;
}

function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
      {(index) => <div key={index}>This is item {index} in the list</div>}    </Repeat>
  );
}
A React component can also return an array of elements:

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}
This is valid JSX, and props.children in MyComponent will simply be the string "Hello world!". HTML is unescaped, so you can generally write JSX just like you would write HTML in this way:

<div>This is valid HTML &amp; JSX at the same time.</div>

If you don't want to wrap your FeedCells in an actual element, you can use React.Fragment instead:


const Feed = (props) => {
    return (
        <React.Fragment>
            { props.arr.map((type, index) => <Cell />) }
        </React.Fragment>
    );
};

Recommend

React JSX In Depth

React Reconciliation The Diffing Algorithm Keys

React Reconciliation The Diffing Algorithm Recursing On Children

React Reconciliation The Diffing Algorithm DOM Elements Of The Same Type

React Reconciliation The Diffing Algorithm Elements Of Different Types

React Legacy Context How To Use Context Updating Context

React Legacy Context How To Use Context Referencing Context in Function Components

React Legacy Context How To Use Context Parent-Child Coupling

React Legacy Context How To Use Context

React How to Contribute Development Workflow

React Event Pooling

React Static Type Checking TypeScript Type Definitions

React Static Type Checking TypeScript Running TypeScript

React Static Type Checking TypeScript Configuring the TypeScript Compiler

React Static Type Checking TypeScript Adding TypeScript to a Project

Static Type Checking TypeScript Using TypeScript with Create React App

React Static Type Checking Flow Adding Flow Type Annotations

React Static Type Checking Flow Running Flow

React Static Type Checking Flow Stripping Flow Syntax from the Compiled Code Babel

React Static Type Checking Flow Adding Flow to a Project

Web Components Using React in your Web Components

Web Components Using Web Components in React

React Context Caveats

React Context Examples Consuming Multiple Contexts

React Context Examples Updating Context from a Nested Component

React Context Examples Dynamic Context

React Context API Context.displayName

React Context API Context.Consumer

React Context API Class.contextType

React Context API Context.Provider

Context API React.createContext

React Context Before You Use Context

React Context When to Use Context

React JavaScript Environment Requirements

React Error Boundaries How About Event Handlers?

React Error Boundaries How About try/catch?

React Error Boundaries Introducing Error Boundaries

React Higher-Order Components Caveats Static Methods Must Be Copied Over

React Higher-Order Components Caveats Don’t Use HOCs Inside the render Method

React Higher-Order Components Convention: Wrap the Display Name for Easy Debugging

React Higher-Order Components Convention: Maximizing Composability

React Higher-Order Components Convention: Pass Unrelated Props Through to the Wrapped Component

React Higher-Order Components Don’t Mutate the Original Component. Use Composition.

React Higher-Order Components Use HOCs For Cross-Cutting Concerns

React Higher-Order Components

React Portals Event Bubbling Through Portals

React Portals Usage

React Portals

React Introducing JSX JSX Represents Objects

React Introducing JSX JSX Prevents Injection Attacks

React Introducing JSX Specifying Children with JSX

React Introducing JSX Specifying Attributes with JSX

React Introducing JSX JSX is an Expression Too

React Introducing JSX Embedding Expressions in JSX

React Introducing JSX

React State and Lifecycle The Data Flows Down

React State and Lifecycle Using State Correctly State Updates are Merged