Best Practices for inputs states - React

Question

I´m dealing with a component which has several inputs. Each list item is a "match" and has 2 inputs per match which you can store the goals of the two teams. This inputs are rendered from a map:

return (
    <div>
      <ul>
        {groupA &&
          groupA.map((match) => (
            <li key={match.id} className="matches">
              <img
                className="home-img"
                src={`${
                  teams.teams.filter((team) => team.id === match.homeTeam.id)[0]
                    .crestUrl
                }`}
              />
              {match.homeTeam.name}
              <input
                onChange={(e) =>
                  setGoalHome({
                    match: match.id,
                    home: match.homeTeam.name,
                    goalHome: e.target.value,
                  })
                }
              />
              vs
              {match.awayTeam.name}
              <input onChange={(e) => setGoalAway(e.target.value)} />
              <img
                className="away-img"
                src={`${
                  teams.teams.filter((team) => team.id === match.awayTeam.id)[0]
                    .crestUrl
                }`}
              />
            </li>
          ))}
      </ul>
      <button onClick={handleSubmit}>Send</button>
    </div>
  );

The question is: what would be the best practice to handle the state of the inputs? Should I have to create a state for every input? On the submission, I want to send the data to a DB.

Answer 1

I would recommend creating a global state manager for all of them since your input are dynamically generated and want to send data to your database it would be good when data ready to send

What I mean is something like this Edit: changed the code to make the idea a little clear

I didn't test it by the way .

   const [data,setData] = useState([])
   useEffect(()=>{
 if(groupA)
    groupA.ForEach(e=>data.push({matchId:e.match.id,goalAway:0,goalHome:0})
setData(data)
  }
},[groupA])
   function setGoalHome({matchId,goalHome}){
      let index = 0;
      const currentMatch = data.find((element,i) => {
           index = i
           return (element.matchId = matchId)
       }
      currentMatch.goalHome = goalHome
      data[index] = currentMatch
      setData(data)
   }
   function setGoalAway({matchId,goalAway}){
     let index = 0;
      const currentMatch = data.find((element,i) => {
           index = i
           return (element.matchId = matchId)
       }
      currentMatch.goalAway= goalAway
      data[index] = currentMatch
      setData(data)

   }
   return (
    <div>
      <ul>
        {groupA &&
          groupA.map((match) => (
            <li key={match.id} className="matches">
              <img
                className="home-img"
                src={`${
                  teams.teams.filter((team) => team.id === match.homeTeam.id)[0]
                    .crestUrl
                }`}
              />
              {match.homeTeam.name}
              <input
                onChange={(e) =>
                  setGoalHome({
                    match: match.id,
                    goalHome: e.target.value,
                  })
                }
              />
              vs
              {match.awayTeam.name}
              <input onChange={(e) => setGoalAway({
                    match: match.id,
                    goalAway: e.target.value,
                  }} />
              <img
                className="away-img"
                src={`${
                  teams.teams.filter((team) => team.id === match.awayTeam.id)[0]
                    .crestUrl
                }`}
              />
            </li>
          ))}
      </ul>
      <button onClick={handleSubmit}>Send</button>
    </div>
  );