I want to create a dynamic reusable component. I know that it can be done with the help of props something like that:
const Sidebar = (props)=>{
return(
<div className="sidebar">
<ul>
<li>{props.list1}</li>
<li>{props.list1}</li>
<li>{props.list1}</li>
<li>{props.list1}</li>
...
</ul>
</div>
)
}
Here there is a problem. I do not know how many <li> are going to come in the sidebar. In some cases sidebar can be large or small.
When I create the dynamic component with the above approach (with the help of props), then I must have a fixed number of list items.
How can I be able to create a reusable component with the dynamic data as well as the dynamic number of <li> tags?
Use .map to iterate over the array and render it as a list.
See: https://reactjs.org/docs/lists-and-keys.html
const Sidebar = (props)=>{
const sidebarItems = props.list1.map(i => <li>{i}</li>);
return(
<div className="sidebar">
<ul>
{sidebarItems}
</ul>
</div>
)
}
ReactDOM.render(<Sidebar list1={["first", "second", "third", "fourth"]}/>, document.getElementById('sidebar'));
ReactDOM.render(<Sidebar list1={["onlyOne"]}/>, document.getElementById('smaller'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="sidebar"></div>
<div id="smaller"></div>