In ReactJS, changing items in the list when an item of the list is clicked can be done by triggering the event onClick() on the item which is currently clicked. For, reflecting the change, we also have to maintain the state in react so that after the change when the page render again the changes get reflected.
To implement the change of item on click, we will create the list data as a state in react by using the useState hook. Then on onClick we will change the item.
Creating React Application:
Step 1: Create a React application using the following command:
npx create-react-app example
Step 2: After creating your project folder i.e. example, move to it using the following command:
cd example
Step 3: Create folder components inside src folder of react project directory and inside the components folder create files List.jsx.
Project structure: It will look like this.
Project Structure
Implementation: Write down the following code in index.js, App.js, and List.jsx file.
JavaScript
// Filename: index.jsimport React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root'));// If you want to start measuring performance// in your app, pass a function to log resultsreportWebVitals(); |
JavaScript
// Filename: App.jsimport React, { useState } from 'react';import List from './components/List';function App() { const [users, setUsers] = useState([ { name: 'Deepak', rollNo: '123', }, { name: 'Yash', rollNo: '124', }, { name: 'Raj', rollNo: '125', }, { name: 'Rohan', rollNo: '126', }, { name: 'Puneet', rollNo: '127', }, { name: 'Vivek', rollNo: '128', }, { name: 'Aman', rollNo: '129', }, ]); const handlechange = (index) => { const newUsers = [...users]; newUsers[index].name = 'New Name'; newUsers[index].rollNo = 'New RollNo'; setUsers(newUsers); }; return ( <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center', height: '100vh', margin: '40px', }}> <h4>Rendering List of components with array of data</h4> {users.map((Users, index) => { return ( <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center', width: '200px', margin: '20px', backgroundColor: 'lightblue', cursor: 'pointer', }} onClick={() => { handlechange(index); }} key={index}> <List key={index} name={Users.name} rollNo={Users.rollNo} /> </div> ); })} </div> );}export default App; |
JavaScript
// Filename: List.jsximport React from 'react';const List = (props) => { return ( <div> <div>Name of student {props.name}</div> <div>Roll number of student {props.rollNo}</div> </div> );};export default List; |
Step to run the application: Run the application using the following command:
npm start
Output: We have taken an array of students’ data in our App.js file then we created a component List.jsx in which the array data is passed and with the help of the mapping function we mapped the List component with an array of data. Then when we click on any of the lists the name and roll no are updated.
Output
