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

• Asignación de desestructuración

• Asignación lógica nula (??=)

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> ))}