How to change color of specific items returen from map list-CodePudding

I want to change border or outline color when I click for one item not all list items but when I click on any items all list changed

I'm trying to change one item color not all...so when I change state it changed for all not for item I clicked

  const [color,setColor]=useState('');



type Values = {
  id: number;
  title: string;
  image: string;
  color:string;
};


const myList2:Array<Values> =[
  {
    id: 1,
    title: 'Suitcase',
    image: suitcase,
    color:'blue',
  },
  {
    id: 2,
    title: 'Briefcase',
    image: briefcase,
    color:'aqua',
  },{
    id: 3,
    title: 'Handbage',
    image: handbage,
    color:'red',
  },
  {
    id: 4,
    title: 'Multy',
    image: multy,
    color:'green',
  },
  {
    id: 5,
    title: 'Backpack',
    image: backpack,
    color:'gray',
  },
  {
    id: 6,
    title: 'Family',
    image: family,
    color:'orange',
  },
]


  const listImage=myList2.map((item,i) => {
    return <span key={i}>
        <img  key={item.id}  style={{borderColor:color}}     onClick={()=>setColor(item.color)} src={item.image} alt={item.title}   />
    </span>
  })

CodePudding user response：

You can use the id for that. So instead of only the color name, keep two pieces of information as an object inside the state variable => id, color.

Like this:

const [selectedList, setSelectedList] = useState({});


  const listImage=myList2.map((item,i) => {
    return <span key={i}>
        <img key={item.id} 
             style={item.id === selectedList.id ? { borderColor: selectedList.color } : {}}     
             onClick={() => setSelectedList({id: item.id, color: item.color})} 
            src={item.image} alt={item.title}   />
     </span>
  })

CodePudding user response：

Currently you are setting only color name in the state variable but not specify that for which index this color will apply

So simply store only index to the state variable on which user click by adding onClick={()=>setActive(i)} in the image tag

and finally check the condition in style by adding style={{borderColor: active == i ? item.color : 'transparent', borderWidth: 3}} in the image tag

const [active,setActive]=useState(-1);

type Values = {
id: number;
title: string;
image: string;
color:string;
};


const myList2:Array<Values> =[
{
    id: 1,
    title: 'Suitcase',
    image: suitcase,
    color:'blue',
},
{
    id: 2,
    title: 'Briefcase',
    image: briefcase,
    color:'aqua',
},{
    id: 3,
    title: 'Handbage',
    image: handbage,
    color:'red',
},
{
    id: 4,
    title: 'Multy',
    image: multy,
    color:'green',
},
{
    id: 5,
    title: 'Backpack',
    image: backpack,
    color:'gray',
},
{
    id: 6,
    title: 'Family',
    image: family,
    color:'orange',
},
]


const listImage=myList2.map((item,i) => {
    return <span key={i}>
        <img  key={item.id}  style={{borderColor: active == i ? item.color : 'transparent', borderWidth: 3}}     onClick={()=>setActive(i)} src={item.image} alt={item.title}   />
    </span>
})