Skip to content
Related Articles

Related Articles

How to change list items in ReactJS when an item is clicked ?

Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 09 Mar, 2022
Improve Article
Save Article

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 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.

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();


App.js




import 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;


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: 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 help of the mapping function we mapped the List component with an array of data. Then when we click on any of lists its name and roll no are updated.

Output


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!