How to change list items in ReactJS when an item is clicked ?
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 that is currently clicked. For, reflecting the change, we also have to maintain the state in react so that after the change when the page is rendered again the changes get reflected.
Prerequisites:
Approach:
The code defines a React component (`App`) that renders a list of user data using the `List` component, allowing users to click on each entry to trigger a function (`handlechange`) that updates the name and roll number of the clicked user.
Steps to Create the React Application And Installing Module:
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:
The updated dependencies in package.json file will look like:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}
Example: Write down the following code in index.js, App.js, and List.jsx file.
JavaScript
// Filename: index.js import 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 results reportWebVitals(); |
Javascript
// Filename: App.js import React, { useState } from 'react' ; import List from './Component/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.jsx import 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:
Contact Us