React updating array of states via useState

Question

I'm new to react/js and need help. I have the following code:

import React, { useState, useEffect } from 'react'

function MainBoard() {

    let letter = ''

    const [lastLetter, setFirstLetter] = useState('')
    function onLastLetterChange(event) {
        const {id, name, type, value} = event.target
        letter = value;
        setFirstLetter((value) => value.slice(-1))
    }

  return (
    <div>
        <input id='5' className='game-area-five' type='text' onChange={onLastLetterChange} value={letter}/>
        <input id='4' className='game-area-four' type='text' maxLength='1' />
        <input id='3' className='game-area-three' type='text' maxLength='1' />
        <input id='2' className='game-area-two' type='text' maxLength='1' />
        <input id='1' className='game-area-one' type='text' maxLength='1' />
    </div>
  )
}

export default MainBoard

Now imagine I have to do all the deal at before the return of MainBoard() five times... there must be a way to solve this with an array right? Second thing, why on input id 5, I cannot input anything on the actual page? It's like it is blocked (and it only happens when I have 'value' attr on the html input)

Help much appreciated and explanation even more <3

EDIT: What I'm trying to do is save only the last input (key -> a letter) using the input html tag, for example if you try and type "hello world" in the input, it should save 'd' and show only 'd' in the input. Hopefully it's somehow clearer... I don't really know how to explain :(

Answer 1

I might be a little lost with what your onLastLetterChange but I dont think you need that unless its for something special. Here is an idea of how to loop through an array to make a bunch of inputs. The Idea is to make an InputComponent then loop over that:

const InputComponent = ({id, class}) => {
  const [letter, setLetter] = useState("")
  const [lastLetter, setFirstLetter] = useState('')
  function onLastLetterChange(event) {
      const {id, name, type, value} = event.target
      setLetter(value);
      setFirstLetter((value) => value.slice(-1))
  }
  return <input id={id} className={`game-area-${class}`} type='text' onChange={onLastLetterChange} value={letter}/>
}

const NormalInput = ({id,class}) => {
  const [value, setValue] = useState("")
  return <input id={id} className={`game-area-${class}`} type='text' onChange={(e) => setValue(e.target.value)} value={value}/>
}

export default function App() {
  const arr = ["one","two","three","four","five"]
  
  return (
    <div className="App">
      {arr.map((value, index) => ( <InputComponent id={index} class={value} />))}
    </div>
  );
}

Answer 2

I can't answer your first question with code for the array because I don't know what lastLetter is supposed to do, but yes an array of objects would be what you need to duplicate this logic.

In React, any variables that are from a useState, will cause the component to re-render. So here letter isn't a useState variable, so the state doesn't actually re-render. The variable changes but because it's not a useState variable it won't re-render. You want to do this instead:

  const [letter, setLetter] = useState("");

Here's a working example:

https://codesandbox.io/s/example-forked-23nsts?file=/src/App.js:0-931