How to create dynamic reusable functional component in React?-CodePudding

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?

CodePudding user response：

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>