Breaking News: Grepper is joining You.com. Read the official announcement!

how to create list in react using jsx

Binod Nayak answered on August 18, 2022 Popularity 9/10 Helpfulness 3/10

answer how to create list in react using jsx

related create a list of jsx elements in react js

how to create list in react using jsx

Comment

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<NumberList numbers={numbers} />);

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: reactjs.org

Tags: javascript jsx list using

Link to this answer
Share Copy Link

Contributed on Aug 18 2022

Binod Nayak

0 Answers Avg Quality 2/10

Closely Related Answers

create a list of jsx elements in react js

Comment

// create a list of jsx elements in react js
import React from "react";
import ReactDOM from "react-dom/client";

const myArr = ["one", "two", "three"];

const listArr = myArr.map((item, i) => <li key={item + i}>{item}</li>); // `.map()` creates/returns a new array from calling a function on every element in the array it's called on

const myList = (
  <ul>{listArr}</ul> // `emptyArr` will evaluate to a list of `<li>` elements
);
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(myList);

Popularity 4/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: elements jsx list javascript

Link to this answer
Share Copy Link

Contributed on Nov 22 2022

Chetan Nada

0 Answers Avg Quality 2/10

how to create list in react using jsx

Contents

More Related Answers

how to create list in react using jsx

Closely Related Answers

create a list of jsx elements in react js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.