Chrome Extension

List and map in React

function subjectList() {
    const subjects = [
        {"name": "Physics", "score": "9"},
        {"name": "Chemistry", "score": "7"},
        {"name": "Math", "score": "10"}
    ];
    const subjectItems = subjects.map( (subject, index) =>
        <div class="item" key={index.toString()}>
            Subject is {subject.name}
            Score is {subject.score}
        </div>
    );
    return <div class="items">{subjectItems}</div>
}
Best JSON Validator, JSON Tree Viewer, JSON Beautifier at same place. Check how cool is the tool

You can render list items in react js using the map function. You can return the desired value or HTML form map function.

In the code snippet, we have taken a list of subjects which is returning each subject item with its name and score. You also need to provide a key in the HTML that you are returning.

Key must be unique to its siblings.

Was this helpful?
0 Comments
Join Devsheet Ask a Question