How do I push a user input into an array with React?

Question

I am a newbie to React and kinda JS. I've scoured this website/internet for an answer and can't find what I'm looking for. I have an array with some defined names to start. I'd like for the user to be able to input their own suggestions and add them to the array. Below is my code so far. The random name caller works just fine, but the input is what's really throwing me. It keeps saying addNewName and saveInput are defined/assigned a value but never used, and that this.state is undefined. Appreciate any help, thank you!

import "./styles.css";
import React, { useState } from "react";
import ReactDOM from "react-dom";

export default function App() {
  const names = [
    {nameCat: "Gibbis"},
    {nameCat: "Janet"},
    {nameCat: "Big Boy"},
    {nameCat: "Martin"},
    {nameCat: "Raccoon Baby"},
    {nameCat: "Bartholo-MEW"},
  ];

  const [activeCat, setActiveCat] = useState(0);
  
  const randomNames = e => {
    const len = names.length;
    setActiveCat(Math.floor(Math.random() * len));
  };

  function saveInput (e) {
    names(e.target.value);
  }

  const addNewName = (e) => {
    let { nameCat, input } = this.state;
    names.push(input);
    setActiveCat({nameCat: nameCat});
  };

return (
  <div class="container">
   <h1 class="gradient-text">let's name that cat!</h1>
    <h4>your cat's name is: <span class="catName">{names[activeCat].nameCat}</span></h4>
    <button onClick={randomNames}>new name!</button>
    <br/>
    <br/>
    <input 
      type="text"
      onChange={this.addNewName}
      />
    <br/>
    <br/>
      <button onChange={(this.saveInput)}>add new name</button>
    </div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Amila Senadheera · Accepted Answer · 2022-08-20 16:09:52Z

1

There is no this inside React function components. And since names is going to change it should be another state. Try like below:

const names = [
  { nameCat: "Gibbis" },
  { nameCat: "Janet" },
  { nameCat: "Big Boy" },
  { nameCat: "Martin" },
  { nameCat: "Raccoon Baby" },
  { nameCat: "Bartholo-MEW" }
];

function App() {
  const [cats, setCats] = React.useState(names);
  const [activeCat, setActiveCat] = React.useState(0);
  const [newName, setNewName] = React.useState("");

  const randomNames = (e) => {
    const len = cats.length;
    setActiveCat(Math.floor(Math.random() * len));
  };

  function saveInput(e) {
    setNewName(e.target.value);
  }

  const addNewName = () => {
    setCats((prevCats) => [...prevCats, { nameCat: newName }]);
    setNewName("");
  };

  return (
    <div className="container">
      <h1 className="gradient-text">let's name that cat!</h1>
      <h4>
        your cat's name is:{" "}
        <span className="catName">{cats[activeCat].nameCat}</span>
      </h4>
      <button onClick={randomNames}>new name!</button>
      <br />
      <br />
      <input type="text" onChange={saveInput} value={newName} />
      <br />
      <br />
      <button onClick={addNewName}>add new name</button>
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

nit: it should be className in JSX elements instead of class in HTML elements.

answered Aug 20, 2022 at 16:09

Amila Senadheera

13.4k16 gold badges31 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

damefolledechat Over a year ago

Wow, I was all over the place with combining class and function components! Thanks so much for this. Just to make sure I have this correctly--in this section, you're updating the state of Cats by taking the prevCats and including them in a variable that pulls the newName from the user input. That input is pushed to nameCat, which is in the const names, which is passed through in const cats? setCats((prevCats) => [...prevCats, { nameCat: newName }]);

Amila Senadheera Over a year ago

Yes, that is right

Collectives™ on Stack Overflow

How do I push a user input into an array with React?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related