React map array

Map function in react

function NameList() {
	const names = ['Bruce', 'Clark', 'Diana']
    return (
    	<div>
      {names.map(name => <h2>{name}</h2>)}
      	</div>
    )
}

Source: youtube.com

React map

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);console.log(doubled);

Source: reactjs.org

Map an array in react

//lets say we have an array of objects called data
<div className="sample">
  {data.map((item)=>{
    return(
  <div key={item.id} className="objectname">
    <p>{item.property1}</p>
    <p>{item.property2}</p>
  </div>
    );
  });
</div>

React map

import React from 'react';   
import ReactDOM from 'react-dom';   
  
function NameList(props) {  
  const myLists = props.myLists;  
  const listItems = myLists.map((myList) =>  
    <li>{myList}</li>  
  );  
  return (  
    <div>  
          <h2>React Map Example</h2>  
              <ul>{listItems}</ul>  
    </div>  
  );  
}  
const myLists = ['A', 'B', 'C', 'D', 'D'];   
ReactDOM.render(  
  <NameList myLists={myLists} />,  
  document.getElementById('app')  
);  
export default App;

Source: javatpoint.com

React map array

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);console.log(doubled);

Source: reactjs.org

Similar codes

11 votes171 views3 answers
React Hook "useState" is called in function "cardState" which is neither a React function component or a custom React Hook function
Javascript React
0 vote167 views1 answer
2.When will the validation functions be called in the react js
Javascript React
4 votes188 views4 answers
Class component react
Javascript React
1 vote166 views1 answer
Found page without a React Component as default export in
Javascript React
0 vote155 views1 answer
Implementing state lifecycle in react class component
Javascript React
23 votes193 views6 answers
React hooks useeffect
Javascript React
12 votes165 views3 answers
Get value of input react
Javascript React
0 vote181 views2 answers
Can i pass data with usenavigate react router
Javascript React
1 vote164 views1 answer
React native detect production
Javascript React
55 votes173 views6 answers
Useref in react
Javascript React