Recorro la matriz de objetos. Cada objeto contiene el título del libro y el nombre del autor.
Recorro el objeto para obtener los nombres de los autores. sin duplicado. porque hay por ejemplo 5 libros del mismo autor
<div className="container "> <div className="row "> {books.map(book( <div key={book.id}> <ul > <li > {book.author} </li> </ul> </div> ))} </div> </div> </div>Si toma sus datos de objetos y los procesa antes de map , encontrará que la tarea es más fácil.
reduce sobre los datos para crear objetos. En cada uno, la clave es el nombre del autor, y el valor es un objeto que contiene el nombre del autor y una matriz que contiene los títulos de sus libros.
Una vez que se completa la iteración, simplemente devuelva una matriz de valores de objetos usando Object.values que puede map .
.author { text-transform: capitalize; } <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div> <script type="text/babel"> function Example({ data }) { function processData(data) { return Object.values(data.reduce((acc, c) => { // Destructure the author and title from the // current object const { author, title } = c; // If the accumulator doesn't have a key // that matches the author assign a default // object to it, and then push in the title acc[author] ??= { author, titles: [] }; acc[author].titles.push(title); // Return the accumulator for the // next iteration return acc; }, {})); } return ( <div> <p>{processData(data).map(obj => { const { author, titles } = obj; return ( <section className="author"> {author} <ul>{titles.map(title => <li>{title}</li>)}</ul> </section> ); })}</p> </div> ); } const data=[{author:"bob",title:"book1"},{author:"dave",title:"book2"},{author:"nicole",title:"book3"},{author:"nicole",title:"book4"},{author:"bob",title:"book5"},{author:"dave",title:"book6"}]; ReactDOM.render( <Example data={data} />, document.getElementById('react') ); </script>Documentación adicional
No estoy seguro de obtener exactamente lo que desea, pero creo que desea seleccionar todos los nombres de los autores sin repetir.
Una opción es usar el método reduce:
const authors = [{author:"Orwell"}, {author:"Knuth"}, {author:"JJ"}, {author: "JJ"}, {author:"Cormen"}, {author:"Knuth"}] const unduplicatedIterator = authors.reduce((set, obj) => set.add(obj.author), new Set()).keys()Si solo muestra el autor, puede hacer esto
books.map(b=>b.author) -> este extrae solo los nombres de los autores
nuevo conjunto -> esto elimina los nombres de autor duplicados
actualizado:
{[...new Set(books.map(b=>b.author))].map((author => <div key={author}> <ul > <li > {author} </li> </ul> </div> ))}En caso de que quiera mostrar otras propiedades que no sean autor
[{id:1, author:"tom", anotherImage:"image 1"},{id:2, author:"tom", anotherImage:"image 1"}].filter((v,i,a)=>a.findIndex(v2=>(v2.author===v.author))===i).map((book => <div key={book.id}> <ul > <li > {book.author} <img src={book.anotherImage}> </li> </ul> </div> ))}