Quiero crear un componente reutilizable dinámico. Sé que se puede hacer con la ayuda de accesorios algo así:
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> ) } Aquí hay un problema . No sé cuántos <li> van a salir en la barra lateral. En algunos casos, la barra lateral puede ser grande o pequeña. Cuando creo el componente dinámico con el enfoque anterior (con la ayuda de props ), debo tener una cantidad fija de elementos de la lista. ¿Cómo puedo crear un componente reutilizable con los datos dinámicos y el número dinámico de etiquetas <li> ?
Use .map para iterar sobre la matriz y representarla como una lista.
Ver: 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>