how to display object data on Button Click inside an Array of data as per the index value-CodePudding

This is my JSON file. When I click the button named info{} object it makes changes on all 5 data at the same time. How should I filter data as per the fid or index value of the data?

{
    "response_code": "1",
    "message": "Data Found",
    "workout": [
        {
            "fid": "1",
            "uid": "1",
            "wdid": "1",
            "type": "0",
            "info": {
                "id": "1",
                "goalid": "3",
                "levelid": "1",
                "workname": "At - Home  Cardio for  Fat Loss",
                "dow": "4",
                "image": "https://sparksapps.in/gym/uploads/6218a2c119f28.jpg",
                "fid": "1"
            }
        },........X5 data inside workout 
  const [data, setData] = useState();

useEffect(() => {
(async () => {

   setData(resp.workout);     

 })();

  },[] );

  return (
 
    {data?.map((element, i) => {
          return (
            <div className="col-md-4" key={element.fid}>  
              <div className="card card-cascade wider" style={{ display: "flex", justifyContent: "start" }}>
                <div className="card-body card-body-cascade text-center pb-0">
                  <h5 id={element.fid} className="card-title">fid:{element.fid}</h5>
                  <h5 className="card-title">uid:{element.uid}</h5>
                  <h5 className="card-title">wdid:{element.wdid}</h5>
                  <h5 className="card-title">type:{element.type}</h5>              
                  <div>
                    {" "}
                      <button onClick={clickedMe} type="button">{element.fid}{element.info.info}</button>
                      {data?.filter(element=> element.fid === '1')?                       
                            <div>                            
                          <div  className="view view-cascade overlay">
                            <img className="card-img-top"src={element.info.image}alt="Card image cap"/>
                          </div>{" "}                       
                          <h5 className="card-title">id:{element.info.id}</h5>
                          <h5 className="card-title">goalid:{element.info.goalid}</h5>
                          <h5 className="card-title">levelid:{element.info.levelid}</h5>
                          <h5 className="card-title">workname:{element.info.workname}</h5>
                          <h5 className="card-title">dow:{element.info.dow}</h5>
                         <img src={element.info.image} alt="" width={'100%'}/>            
                                   
                        </div>
                      :null}                  
                  </div>
                  
                  <div className="card-footer text-muted text-center mt-4">
                    2 days ago
                  </div>
                </div>
              </div>
            </div>
          );
        })}
)

Alike [0][1][2][3][4] if I click button on button of info inside [1] the data inside object info{} available at [1] should display of 1 only and the rest should remain unClicked.

CodePudding user response：

I think you want to modify a single item, you can try passing the element id

<button onClick={() => onUpdateItem(element.fid)} >{info}</button>
---
const onUpdateItem = (id) => {

setData(data.map(item => {
  if (item.fid === id) {
    // Create a *new* object with changes
    return { ...item, updateProp: ''update };
  } else {
    // No changes
    return item;
  }
}));

}

refer the new docs on array updates

CodePudding user response：

create a state for index:

const [workoutIndex, setWorkoutIndex ] = useState(null)

Now on button click just store the value of index to this state like this:

<button onClick={() => clickedMe(i)} type="button">{element.fid}{element.info.info}</button>

And similarly

const clickedMe = (index) => {
    setWorkoutIndex(index);
}

Now what you wanna do is simply use that index on your data state to show value of this index only, like this:

{
   workoutIndex 
   && 
   <div>
      {data[workoutIndex]}
      {/* Display your data here */}
   </div>
}

Usage

{
    workoutIndex
    &&             
    <div>                            
        <div  className="view view-cascade overlay">
            <img className="card-img-top"src={data[workoutIndex].info.image}alt="Card image cap"/>
        </div>                   
        <h5 className="card-title">id:{data[workoutIndex].info.id}</h5>
        <h5 className="card-title">goalid:{data[workoutIndex].info.goalid}</h5>
        <h5 className="card-title">levelid:{data[workoutIndex].info.levelid}</h5>
        <h5 className="card-title">workname:{data[workoutIndex].info.workname}</h5>
        <h5 className="card-title">dow:{data[workoutIndex].info.dow}</h5>
        <img src={data[workoutIndex].info.image} alt="" width={'100%'}/>                                              
    </div>
}

You can do the same, the other way around by setting the value at the index rather than setting index in state, but this will set more data compared to a single index integer. So be careful with that case when working with large data.