如何更改 reactjs 中映射数组中唯一一项的图标？

Question

I was creating the functionality of pinning and unpinning of particular note, so when the user clicks the thumbtack icon I want that icon of only that particular note changes to a cross icon but when I am clicking on the second notes to pin it then the icon that changed on previous pinned note gets restored to its original form.

I have created the pinning functionality using onPin function but struggling with changing the icon of that particular pinned item.

I want to add icons to pinned items in such a way that previously added close icons stay in their place and do not get updated.

What I tried?

So i created the state variable iconId which is an array so whenever the user clicks pinned icon then new id will be pushed to the iconId array and while displaying the output I put the condition that if the current id is included in iconId array then change icon of all those respective ids in iconId to cross icon, apparently this functionality dint work.

-----------------------App.js--------------------------------

   import React, { useState } from "react";
import './App.css';
import Input from './Components/Input';
import Navbar from './Components/Navbar';
import Notesview from './Components/Notesview';
import Notesdata from "./Data/Notesdata";

function App() {

  const [data, setData] = useState(Notesdata);
  // const [pin, setpin] = useState(true)
  const [iconId, seticonId] = useState([])

  function handleDelete(id) {

    let newData = data.filter((item) => item.id !== id)
    setData(newData)
    console.log(newData)
    console.log(Notesdata)
    console.log(0)
  }

  function handlePost(value) {
    //  Notesdata.push(value)
    // setData(Notesdata)
    // // console.log(typeof data)
    // console.log(Notesdata)
    setData([...data, value]);
  }

  
  function onPin(id) {
    let index = data.map((item) => {
      return item.id
    }).indexOf(id)

    let arr1 = data.slice(0, index).concat(data.slice(index + 1))
    arr1.unshift(data[index])
    setData(arr1);

  

    seticonId([...iconId] , id)

  console.log(iconId)
  }

  function handleclose() {
    // setpin(!pin)
    // seticonId("")
  }

  return (
    <div className="App">
      <header className="App-header">
        <Navbar />
        <Input data={data} handlePost={(value) => handlePost(value)} />
        <Notesview handleDelete={handleDelete} Data={data} onPin={onPin} iconId={iconId} handleclose={handleclose} />
      </header>
    </div>
  );
}

export default App;

----------------Noteview function(mapping function)---------------

import React from 'react'
import Notescard from './Notescard'
import "../Styles/Notes.css"
// import { useState } from 'react'



const Notesview = ({ Data, handleDelete, onPin , iconId, handleclose}) => {

  return (
    <>
      <div className='notes'>
        {Data && Data.map((item) => {
            return <Notescard item={item} handleDelete={handleDelete} onPin={onPin} iconId={iconId} key={item.id} handleclose={handleclose}/>
          })
        }
      </div>
    </>
  )
}

export default Notesview

-----------------------------Notescard component------------------

import React from "react";
import "../Styles/Notescard.css";
import { FaThumbtack, FaTrashAlt, FaPencilAlt ,FaTimesCircle} from "react-icons/fa";
// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'



const Notescard = ({ item , handleDelete,onPin,iconId,handleclose, key}) => {


  
  return (
    <>
      <div className="box">
        <div className="content">
          <h2 className="item1">{item.title}</h2>
          <h4 className="item1"> {item.tagline}</h4>
          <p className="item2">{item.description}</p>
        </div>

        <div className="icons">

        {iconId.includes(item.id) ? <FaTimesCircle onClick={handleclose}/> : <FaThumbtack id={item.id} onClick={() => onPin(item.id)}/> }


          <FaTrashAlt onClick={() => handleDelete(item.id)}/> 

          
          <FaPencilAlt />
        </div>
      </div>
    </>
  );
};

export default Notescard;

Answer 1

Issue

You are passing two arguments to the seticonId state updater function.

seticonId([...iconId], id)

The id is never added to the iconId state.

Solution

Use a functional state update to append the id to the array.

seticonId((iconId) => iconId.concat(id));

Code:

const Notescard = ({ item, handleDelete, onPin, iconId, handleclose }) => {
  return (
    <div className="box">
      <div className="content">
        <h2 className="item1">{item.title}</h2>
        <h4 className="item1"> {item.tagline}</h4>
        <p className="item2">{item.description}</p>
      </div>

      <div className="icons">
        {iconId.includes(item.id) ? (
          <FaTimesCircle onClick={() => handleclose(item.id)} />
        ) : (
          <FaThumbtack id={item.id} onClick={() => onPin(item.id)} />
        )}

        <FaTrashAlt onClick={() => handleDelete(item.id)} />

        <FaPencilAlt />
      </div>
    </div>
  );
};

...

const Notesview = ({ Data, handleDelete, onPin, iconId, handleclose }) => {
  return (
    <div className="notes">
      {Data.map((item) => {
        return (
          <Notescard
            item={item}
            handleDelete={handleDelete}
            onPin={onPin}
            iconId={iconId}
            key={item.id}
            handleclose={handleclose}
          />
        );
      })}
    </div>
  );
};

...

export default function App() {
  const [data, setData] = useState(Notesdata);
  const [iconId, seticonId] = useState([]);

  function handleDelete(id) {
    let newData = data.filter((item) => item.id !== id);
    setData(newData);
    console.log(newData);
    console.log(Notesdata);
    console.log(0);
  }

  function handlePost(value) {
    setData([...data, value]);
  }

  function onPin(id) {
    setData((data) => {
      const index = data.findIndex((item) => item.id === id);

      const arr1 = data.slice(0, index).concat(data.slice(index + 1));
      arr1.unshift(data[index]);
      return arr1;
    });

    seticonId((iconId) => iconId.concat(id));
  }

  function handleclose(id) {
    setData((data) => {
      const index = data.findIndex((item) => item.id === id);
      const insertIndex = data.findIndex((item) => !iconId.includes(item.id));

      const arr1 = data.slice(0, index).concat(data.slice(index + 1));
      arr1.splice(insertIndex - 1, 0, data[index]);
      return arr1;
    });

    seticonId((iconId) => iconId.filter((elId) => elId !== id));
  }

  return (
    <div className="App">
      <Input data={data} handlePost={(value) => handlePost(value)} />
      <Notesview
        handleDelete={handleDelete}
        Data={data}
        onPin={onPin}
        iconId={iconId}
        handleclose={handleclose}
      />
    </div>
  );
}