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

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?