Trying to display JSON by sections in React JS

You could create a group by letter, for your contacts, and then you iterate over the letters and for each letter, iterate over the contacts

    export default class ShowContactsList extends Component {
      render() {
        const groupedByLetter = mockData.reduce((groups, contact) => {
          const letter = contact.fname[0].toUpperCase();
          const group = groups[letter] || [];
          group.push(contact);
          groups[letter] = group;
          return groups;
        }, {});
    
        return Object.entries(groupedByLetter).map(([letter, contacts]) => {
          return (
            <div style={{ backgroundColor: "yellow", width: "80%" }}>
              <h1>{letter}</h1>
              {contacts.map((inputMap, index) => (
                <ContactListOneContact
                  key={index}
                  lname={inputMap.lname}
                  fname={inputMap.fname}
                  contact={inputMap.contact}
                />
              ))}
            </div>
          );
        });
      }
    }

Demo at https://codesandbox.io/s/twilight-cdn-e4tgs?file=/src/App.js

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top