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 :(

I edited the thread, hopefully I explained it good enough. Basically, I have 5 inputs that I want them to hold the last key ONLY and remember and show it. — AoXNeR, Jun 28 '22 at 21:51

score 1 · Accepted Answer · answered Jun 28 '22 at 21:43

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>
  );
}

answered Jun 28 '22 at 21:43

Colin Hale

824
5
11

Thank you so much for the long response, the code as a whole is a bit overwhelming but taking it in little by little makes me realize it much more clearer. I edited the thread to try and explain what I'm trying to achieve. – AoXNeR Jun 28 '22 at 21:50
Does this help take you where you need to go? Or do you need a little more explination? – Colin Hale Jun 28 '22 at 21:52
I think I realized pretty well what you did, but think it is too complex for me at the moment, I need few more exercise before I can pull that off. It is still helpful nonetheless. I think it helped me understand the subject a bit more and will provide me when time comes (as I bookmarked this page) – AoXNeR Jun 28 '22 at 21:59
Just giving a heads up, took a sitting for few minutes and tried to execute this, and it worked apart for the same issue I had in the thread (always empty input) but I noticed instantly what was the problem, it works now! Big appreciations for the explanation. – AoXNeR Jun 28 '22 at 22:15

score 1 · Answer 2 · answered Jun 28 '22 at 21:49

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

Thank you for your answer! I've edited the thread, maybe you can be kind enough to try and give me a hand on the first subject. - For the second thing, you really helped and I've now made it work thanks to you. I appreciate it! — AoXNeR, Jun 28 '22 at 21:56

React updating array of states via useState

2 Answers2