How to create dynamic reusable functional component in React?


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?

Source: React – Stack Overflow

November 13, 2021
Category : News
Tags: html | javascript | json | react-component | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.