const ListItem = React.createClass({
render: function() {
return <li > {
this.props.item
} < /li>;
}
});
const ToDoList = React.createClass({
render: function() {
const todoItems = this.props.items.map(item => {
return <ListItem item = {
item
} > < /ListItem>
})
return ( <
ul > {
todoItems
} < /ul>
);
}
});
//creating a basic component with no data, just a render function
const MyApp = React.createClass({
render: function() {
return ( <
div className = "well" >
<
h1 > Hello < /h1> <
ToDoList > < /ToDoList> <
/div>
);
}
});
//insert the component into the DOM
ReactDOM.render( < MyApp / > , document.getElementById('container'));
<
div id = "container" > < /div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>
A ReactJs tutorial says:
If we want to make this a truly extensible list, we could create an array of items, then pass them into props through the ToDoList component, then render out each item. Let's do that now.
How can I pass the array of items in the above code?
type AccordionProps = [ { title: string; body: Component; }, ]; However, react props must be an object: type AccordionProps = { title: string; body: Component; }, Then, in order to render an array of items, you need to map over the array of props, rendering the component you want in each iteration of the loop.
render you still can't render multiple items because react needs a root. So you can render a single component inside the ReactDOM. render and render an array of items in the internal component.
Use square brackets to get the first element of an array in React, e.g. const first = arr[0]; . The array element at index 0 is the first element in the array. If the array is empty, an undefined value is returned.
Data can be passed to components via props.
https://facebook.github.io/react/tutorial/tutorial.html#passing-data-through-props
In your case props would be accessed inside the components via this.props
.
<TodoList />
takes a prop called items which is an array. Inside <TodoList />
you can map through that array and return elements.
For example in the render method of your class you would return TodoList with a prop of items:
const myItems = [{ name: 'item 1' }, { name: 'item2' }];
function MyApp() {
return (
<TodoList items={myItems} />
);
}
Then in TodoList you map the items
function TodoList({ items }) {
return items.map(item => (
<h1>{item.name}</h1>
));
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With