how to update single list element in react .map

Question

I'm trying to figure how to update the a single element in a react .map. I want to add a selected state to my react button but right now its adding the selected state to all my buttons. I'm not sure how to go about this and wondering if someone could help me out please.

I've put to together a codeandsandbox to demonstrate what is happening, I'm trying to do this in the Dashboard.jsx page in the handleButtonClick function, I know it will need to take in an id but at this point I'm not sure what else.

import React, { useEffect, useState } from 'react';
import PropTypes from "prop-types";
import Item from './Item';
import { fetchData } from '../api/fetcher';

const Dashboard = () => {

  const [response, setResponse] = useState([]); 
  const [isSelected, setIsSelected] = useState(false); 
  //call data on page load
  useEffect(() => {
      fetchData(setResponse);
  }, [])

console.log(response);

const handleButtonClick = (id) => {

  setIsSelected(!isSelected)
}

  return (
    <React.Fragment>
      {response.map(items => 
        <Item 
          prodId={items.productId}
          key={items.productId}
          image={items.imageUrl}
          description={items.description}
          itemName={items.name}
          discount={items.promotionBadge}
          price={items.price}
          priceWas={items.priceWas}
          selected={isSelected}
          onClick={() => handleButtonClick(items.productId)}
        />
      )}
    </React.Fragment>
  );
}

export default Dashboard;

the setIsSelected(!isSelected) applies the style to all the buttons.

Here is my code and how it works:

https://codesandbox.io/s/charming-butterfly-vy6v8?file=/src/App.js

Does this answer your question? React Hooks setState of an element in an array — Sinan Yaman
– Sinan Yaman, Commented Apr 1, 2021 at 14:37

Prakhar Jain · Accepted Answer · 2021-04-01 14:31:34Z

2

Move your isSelected state from Dashboard to Item component so that each Item list will have its own state.

I have made the changes you can check below.

https://codesandbox.io/s/billowing-snowflake-zibyf?file=/src/components/Item.jsx

edited Apr 1, 2021 at 14:31

answered Apr 1, 2021 at 14:24

Prakhar Jain

825 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ryan Wolton · Accepted Answer · 2021-04-01 14:30:18Z

2

You could track which one is selected by holding the selected productId or Id's if multiple in the state and then selected would be just..

selected={items.productId === selectedProductId}

or

selected={selectedProductIds.includes(item.productId)}

This would also make it easier when you actually need to do something with the selected products.

answered Apr 1, 2021 at 14:30

Ryan Wolton

716 bronze badges

Comments

Zeno Dalla Valle · Accepted Answer · 2021-04-01 14:33:16Z

1

you have to move useState and handleButtonClick inside Item, so every item has its useState and handleButtonClick. I've corrected it in sandbox for you. I also edited the className attribute for button item because they were twisted. sanbox

answered Apr 1, 2021 at 14:33

Zeno Dalla Valle

9295 silver badges19 bronze badges

Comments

Birol Furkan Karadağ · Accepted Answer · 2021-04-01 14:34:30Z

0

https://codesandbox.io/s/clever-morning-iqm7q

I've make some changes in your solutions. Your useState have to be unique for every items.

answered Apr 1, 2021 at 14:34

Birol Furkan Karadağ

292 bronze badges

Comments

Dominico Tung · Accepted Answer · 2021-04-01 14:32:05Z

-1

Your variable selectedId was passed to all items with only one value. Please see my comment inside code: // <<<<<<<------------ SEE ME

import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import Item from "./Item";
import { fetchData } from "../api/fetcher";

const Dashboard = () => {
  const [response, setResponse] = useState([]);
  const [selectedId, setSelectedId] = useState(); // <<<<<<<------------ SEE ME
  //call data on page load
  useEffect(() => {
    fetchData(setResponse);
  }, []);

  console.log(response);

  const handleButtonClick = (id) => {
    setSelectedId(id); // <<<<<<<------------ SEE ME
  };

  return (
    <React.Fragment>
      {response.map((items) => (
        <Item
          prodId={items.productId}
          key={items.productId}
          image={items.imageUrl}
          description={items.description}
          itemName={items.name}
          discount={items.promotionBadge}
          price={items.price}
          priceWas={items.priceWas}
          selected={selectedId === items.productId} // <<<<<<<------------ SEE ME
          onClick={() => handleButtonClick(items.productId)}
        />
      ))}
    </React.Fragment>
  );
};

export default Dashboard;

answered Apr 1, 2021 at 14:32

Dominico Tung

521 silver badge5 bronze badges

1 Comment

Sinan Yaman Over a year ago

This points out the problem, but doesn't answer the question. Please include an answer here.

Collectives™ on Stack Overflow

how to update single list element in react .map

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related