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>
}
We are a bunch of lazy programmers so we developed this chrome extension
search code from your favorite search engine
Install Now

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
Open Code Manager We are hiring