React Lists

 

React Lists (Collections of value)

*     Lists are used to display data in an ordered format and mainly used to display menus on websites like navigation bar, menu bar etc.

*     Let us now create a list of elements in React.

*     To do this,we will traverse the list using the javascript map() function and updates elements to be enclosed between <li></li> elements.

*     Finally we will wrap this new list within <ul></ul> elements and render it to the DOM.

 

Map() – rendering the element one by one

Index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import './myfile.scss';

import App from './App';

import reportWebVitals from './reportWebVitals';

import styles from './demo.module.css';

 

const root = ReactDOM.createRoot(

  document.getElementById('root')

);

 

const newList=[1,2,3,4,5,"hi","bye"]

const rl=newList.map((listvalues)=>{

return <li>{listvalues}</li>

 

});

 

var mystyle={color:'green',textAlign:'center'}

const element =<ul>{rl}</ul>;

 root.render(element);

 

 

 

Output

Index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import './myfile.scss';

import App from './App';

import reportWebVitals from './reportWebVitals';

import styles from './demo.module.css';

 

const root = ReactDOM.createRoot(

  document.getElementById('root')

);

 

const newList=[1,2,3,4,5,"hi","bye"]

const rl=newList.map((listvalues)=>{

return <li>{listvalues+" "+newList}</li>

 

});

 

var mystyle={color:'green',textAlign:'center'}

const element =<ul>{rl}</ul>;

 root.render(element);

 

 

 

Output

 

React List using Function

Index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import './myfile.scss';

import App from './App';

import reportWebVitals from './reportWebVitals';

import styles from './demo.module.css';

 

const root = ReactDOM.createRoot(

  document.getElementById('root')

);

function Menubar()

{

const newList=[1,2,3,4,5,"hi","bye"]

const rl=newList.map((listvalues)=>{

return <li>{listvalues}</li>

 

});

return <ul>{rl}</ul>

}

var mystyle={color:'green',textAlign:'center'}

const element =<Menubar newList/>

 root.render(element);

 

 

 

Output

React List using Function and Props

Index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import './myfile.scss';

import App from './App';

import reportWebVitals from './reportWebVitals';

import styles from './demo.module.css';

 

const root = ReactDOM.createRoot(

  document.getElementById('root')

);

function Menubar(props)

{

const myvalue=props.myvalue;

const rl=myvalue.map((listvalues)=>{

return <li>{listvalues}</li>

 

});

return <ul>{rl}</ul>

}

const myvalue=[2,4,6,8]

var mystyle={color:'green',textAlign:'center'}

const element =<Menubar myvalue={myvalue}/>

 root.render(element);

 

 

 

Output