Son Dang Son Dang - 9 months ago 34
React JSX Question

React - List Items props doesn't pass into rendered List component

I'm new at React Js, I tried to make a List component to inject different ListItems.
But when items passed, props doesn't pass.
What went wrong?

Update 12Mar,2017

const List = (props) => {
const ComponentToRender = props.component;
let content = (<div></div>);

if (props.items) {
content = props.items.map((item, index) => (
<ComponentToRender key={`item-${index}`} item={item}/>
));
} else {
content = (<ComponentToRender />);
}

return (
<ul>
{content}
</ul>
);
}

const ListItem = (props) => (
<li>
<a href={props.href}>
<i className={props.icon}></i>
{props.name}
</a>
</li>
);

const el = [
{href: "#", icon: "fa fa-phone", name: "bannana"},
{href: "#", icon: "fa fa-phone", name: "apples"}
];

ReactDOM.render(
<div>
<List component={ListItem} items={el} />
</div>
,document.getElementById('app')
);


See on codepen

Thanks in advance my friends.

Answer Source

You misspelled items as item:

ReactDOM.render(
  <div>
    <List component={ListItem1} items={["banana", "apples"]} />
    <List component={ListItem1} items={["banana", "apples"]} />
  </div>
  ,document.getElementById('app')
);