Updating useState from components

user_17035428 0
Viewed 31

I am learning ReactJS (slowly it seems) and was wondering how the below would work:

I have a search function that the user can enter a word(s) into and it spits out a load of variations of the word entered. The word is put into a button that I would like the user to be able to click and have the whole thing happen again (rather than them having to enter the name in manually).

I can't figure out how to update the useState from the NameList.js file. (I currently get the Error: React Hook "useState" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function) Thanks in advance!

NameList.js

export default function NamesList({ namesList }) {
    var names_generated = arrayMaker(generator(split_name(namesList.toString())))
    return (
        names_generated.map(names_generated => {
            return(
                <div className="col-4 col-xl-2 col-xxl-1">
                    <button className="sug-names">{names_generated.name}</button>
                </div>
            )
        })
    )
}

Home.js

export default function Home() {
  const [namesList, setNamesList] = useState([])
  const inputName = useRef()

  function getInputName(e){
    e.preventDefault();
    const name = inputName.current.value
    if (name === '') return
    setNamesList([name])
  }
  return (
    <>
      <div className="d-flex align-items-center justify-content-center">
        <div className="">
          <Container>
            <Form>
                <div>
                    <Form.Control ref={inputName} id="input_name" name="username" type="text" placeholder="Desired Name" />
                    <Button onClick={getInputName} variant="primary" type="submit"></Button>
                </div>
            </Form>
          </Container>
          <Container>
            <div className='row'>
              <NameList namesList={namesList} />
            </div>
          </Container>
        </div>
      </div>
    <div>0 Names Found</div>
    </>
  )
}
reactjs
1 Answers

I guess it happened because of two things,

The first is that the child should not be in the form of:

 “function NamesList(){}”

but rather must be in the form of:

 “const NamesList =() =>{}”

and as for the parent, it must be in the form of:

“function home(){}”

and not

“const NamesList = () =>{}”

And the second thing is to try to delete the parentheses like this code:

const NamesList = (namesList) => {
    var names_generated = arrayMaker(generator(split_name(namesList.toString())))
    return (
        names_generated.map(names_generated => {
            return(
                <div className="col-4 col-xl-2 col-xxl-1">
                    <button className="sug-names">{names_generated.name}</button>
                </div>
            )
        })
    )
}

export default NamesList ;

also edit this function in Home file:

  function getInputName(e){
    e.preventDefault();
    const name = inputName.current.value
    if (name === '') return
    setNamesList(name)
  }
user_163770850
Related