React Use a fetch result in a form (and modify)-CodePudding

I'm a newbie to React and I'm stuck on a problem that seems basic but ...

I'm trying to make a form to update the information of a member.

For that I get a JSON from the back end thanks to FETCH then I display it in the render using TextInput (to be able to modify it)

function Judokas() {
 
  const [prenom, onChangePrenom] = useState("c'est moi")
  const [data, onChangeData] = useState([name: ''])

  useEffect(() => {
    fetch('http://192.168.1.104:8080/judo/judoka/4427')
      .then((response) => {
        return response.json()
      })
      .then((data) => {
        onChangeData(data)
      })
      .catch((err) => {
        console.log('Fetch Error : '   err.message)
      })
  }, [])

  // display
  return (
    <div>
      {data ? (
        <StyledDiv>
          <div>
            <span>nom: </span>
            <span>{data.nom} </span>
            <TextInput
              style={styles.input}
              value={data.nom}
              onChangeText={(val) => {
                data.nom = val
                onChangeData(data)
              }}
            />
          </div>
          <div>
            <span>prenom: </span>
            <div>
              <TextInput style={styles.input} value={prenom} onChangeText={onChangePrenom} />
            </div>
          </div>
        </StyledDiv>
      ) : (
        <div></div>
      )}
    </div>
  )
}

export default Judokas

Any change on the first one (name) is visible in the debugger but there is no change on the display. I don't understand, I think it's related to a "controled input" problem but I can't understand (and can't fix either) Second one works fine but is not concerned by the usesEffect so it is a problem of interference between usesEffect/

Someone can explain me what is happening and/or correct what is happening.

Thanks

CodePudding user response：

It works with:

<TextInput
  style={styles.input} 
  value={data.nom}
  onChangeText={(e) => onChangeData({ nom: e })}
/>

CodePudding user response：

as I understand you have to use react js state in correct way this is cause the issue actually.

please here is link you can go through it. click here