How can I change the state of clicked button. Now it is changing state of all Accept button to Save in the page. I tried to pass the id, but it doesn't work.

https://codesandbox.io/s/frosty-chihiro-s4v1cc?file=/src/styles.css

const [processRequest, setProcessRequest] = useState("Accept");
    const processRequestData = (e) => {
        const text = "Save";
        setProcessRequest(text,e.target.id);
      };

<section >

            {
                        searchResults.map(({id, name, mobile}) => (

                        <div className='row'>
                            <div className="playerRow"> 
                                <label key={id}>
                                    <div className="row">
                                        <div className="checkStyle1">
                                            <input type="checkbox"></input>
                                        </div>
                                        <div className="plyName">
                                            <span>{name}</span>
                                        </div>
                                        <div className="plyMobile">
                                            <span>{mobile}</span>
                                        </div>
                                        <div className="checkStyle2">
                                            <input type="checkbox"></input>
                                            <label>Member</label>
                                        </div>
                                        <div className="checkStyle3">
                                            <input type="checkbox"></input>
                                            <label>Active Player</label>
                                        </div>
                                        <div className="btnStyle4">
                                            <button type="button" onClick={ () => processRequestData(e)}>{processRequest}</button>
                                        </div>
                                        <div className="btnStyle4">
                                            <input type="button" value="Decline Request"></input>
                                        </div>
                                    </div>
                                </label>
                            </div>  
                            
                        </div>
                       
                   ))} 
            </section>

CodePudding user response：

I have fixed it for you, you were updating the same string variable for all the array items.

const data = [
  {
    id: 1,
    name: "Danile Victor",
    mobile: "3423224232",
    processRequest: "Accept"
  },
  {
    id: 2,
    name: "Sam Philip",
    mobile: "2312312310",
    processRequest: "Accept"
  },
  {
    id: 3,
    name: "Von Rodriguz",
    mobile: "5678999010",
    processRequest: "Accept"
  },
  {
    id: 4,
    name: "Style Dorkin",
    mobile: "7896543212",
    processRequest: "Accept"
  },
  {
    id: 5,
    name: "Rad",
    mobile: "7009943212",
    processRequest: "Accept"
  }
];

export default function App() {
  const [acceptPlayer, setAcceptPlayer] = useState("Accept");
  const [requestList, setRequestList] = useState([]);
  const [searchResults, setSearchResults] = useState([]);
  const [processRequest, setProcessRequest] = useState("Accept");

  useEffect(() => {
    setRequestList(data);
  }, []);
  const processRequestData = (e) => {
    setRequestList(
      requestList.map((r) => {
        if (r.id === e) {
          r.processRequest = "Save";
        }
        return r;
      })
    );
  };

  return (
    <div className="App">
      <section className="col1">
        {requestList.map(({ id, name, mobile, processRequest }) => (
          <div className="row">
            <div className="playerRow">
              <label key={id}>
                <div className="row">
                  <div className="checkStyle1">
                    <input type="checkbox"></input>
                  </div>
                  <div className="plyName">
                    <span>{name}</span>
                  </div>
                  <div className="plyMobile">
                    <span>{mobile}</span>
                  </div>
                  <div className="checkStyle2">
                    <input type="checkbox"></input>
                    <label>Member</label>
                  </div>
                  <div className="checkStyle3">
                    <input type="checkbox"></input>
                    <label>Active Player</label>
                  </div>
                  <div className="btnStyle4">
                    <button
                      type="button"
                      onClick={(e) => processRequestData(id)}
                    >
                      {processRequest}
                    </button>
                  </div>
                  <div className="btnStyle4">
                    <input type="button" value="Decline Request"></input>
                  </div>
                </div>
              </label>
            </div>
          </div>
        ))}
      </section>
    </div>
  );
}

CodePudding user response：

setProcessRequest takes only single argument. https://reactjs.org/docs/hooks-state.html

You need to track the state of the items clicked, e.g. mapping id of the search result to toggle state.

CodePudding user response：

You are using same variable processRequest for every button. You can make array for each element in data so this array (let's say buttonNames) would look like this: ["Accept", "Save", "Accept", "something", ...] and inside jsx in .map in onClick you would pass index to processRequestData and change value in buttonNames by this index. The rendered value of button would be taken from buttonNames by index for example {buttonNames[index]}.