No using class Component , only function in React-CodePudding

Hello I am just learning react and I am looking at tutorials but in the version that was installed, react is no longer using the classes, it only appears functions and I would like to continue that way if possible, but I have a problem with where to change the name in this part with a click but it does not allow me to access persons(const), how could I do it?

import Person from './Person/Person'

function App() {
    const persons = {
      persons: [
        { name: 'Jose', age: 32},
        { name: 'Gabriel', age: 2}
      ]
    }

    const switchNameHandler = () => {
      persons({
        persons: [
          { name: 'Jose Fernando', age: 32},
          { name: 'Gabriel', age: 2}
        ]
      })
    }
  return (
    <div className="App">
      <h1>Hi, I'm a React App!</h1>
      <button onClick={switchNameHandler}> Switch Name</button>
      <Person name={persons.persons[0].name} age={persons.persons[0].age}/>
      <Person name={persons.persons[1].name} age={persons.persons[1].age}> I like play</Person>
    </div>
  );
}

export default App;

How could I fix the switchNameHandler part?

I know that if I use classes I can access this.setPersons, but is there any way to access without using classes?

CodePudding user response：

You need to use the useState hook. All hooks return two things in a de-structured array (1) the state value and (2) the function to set that state value. and the value you put in the useState() function is the initial value.

For example:

   const [name, setName] = useState("Ben");

Here the initial value of name is "Ben". If I wanted to change that value, I could use the setName function and do something like this setName("Jerry");. Now the value of name is "Jerry".

The biggest difference between the setter (in this case setName) and this.setState (in a class component), is that this.setState remembers and spreads the previous state automatically for you if you don't explicitly define it. With hooks, you have to do that your self:

For example:

const [person, setPerson] = useState({ name: "", id: "", age: "" });

If I have this state, and want to edit just the name of the person, I have to remember to spread the previous state object every time I update state, by using a callback function - where the parameter in the callback is the previous state:

// just updating name
setPerson(prevPerson => ({ ...prevPerson, name: "Bob" }));

Here, the only thing that changes was the "name" value and everything else stayed the same:

Result: { name: "Bob", id: "", age: ""}

Check out the react documentation for more tips and examples: https://reactjs.org/docs/hooks-state.html