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:

• NodeJS or NPM
• React JS

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:

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:

Output