-2

There is a class component that needs remake to functional and state remake to useState hook. But state has few properties:

class App extends React.Component {

  state = {
    num: 0,
    text: 'no',
    textUpper: 'HELLO'
  }

  changeState = () => {
    this.setState({
      num: this.state.num + 1,
      text: "yes",
      textUpper: 'BYE'
    });
  }

  render() {
    return (
      <div>
          <button onClick={this.changeState}>like</button>
          {this.state.num}
          {this.state.text}
          {this.state.textUpper}
      </div>
    );
  }
}

I know that if it were only one property it look like this:

const App = () => {
      const [num, setNum] = useState(0);

      const changeState = () => {
           setNum(num+1);
       }

    return (
      <div>
            <button onClick={changeState}>like</button>
           {num}
      </div>
    );
}

But how to remake my component when I have few properties as in my case I dont know. Tell me please.

bytor
  • 19
  • 4
  • 2
    Does this answer your question? [useState to update multiple values in React](https://stackoverflow.com/questions/59813926/usestate-to-update-multiple-values-in-react) – Anurag Srivastava Apr 18 '20 at 18:08
  • @Anurag Srivastava No,it is very different from my question! Did you look at another question? Or just read the headline? There he generally asks about registration. – bytor Apr 18 '20 at 18:15
  • You have multiple values in the state, and the answer shows how to do that in a functional component. Or were you expecting a walkthrough on writing functional components from scratch? – Anurag Srivastava Apr 18 '20 at 18:17
  • @Anurag Srivastava I want to see how my component look like if he was bi functional – bytor Apr 18 '20 at 18:25

1 Answers1

0

You can use an object as a value in useState...

// Set up your state
const [value, setValue] = useState({
   num: 0,
   text: "no",
   textUpper: "HELLO"
});

// Later on to update
setValue({
    num: value.num + 1,
    text: "yes",
    textUpper: "BYE"
});

One important thing to be aware of though is that using setValue is slightly different to this.setState. setValue will replace the entire value, like so...

this.state = {
    a: "Hello",
    b: "World"
}

this.setState({
    a: "Goodbye"
})

// this.state = { a: "Goodbye", b: "World" }

const [value, setValue] = useState({
    a: "Hello",
    b: "World"
})

setValue({
    a: "Goodbye"
})

// value = { a: "Goodbye" }

You can alternatively use multiple useState hooks with single values.

// Set up your state
const [num, setNum] = useState(0);
const [text, setText] = useState("no");
const [textUpper, setTextUpper] = useState("HELLO");

// Later on to update
setNum(num + 1);
setText("yes");
setTextUpper("BYE");

It's really up to you and your use case to determine the best approach. Good luck!

Tom Brown
  • 421
  • 3
  • 8
  • ok, but imagine that I need to change all the properties of the state when I click on the buttons. Therefore, tell me just how to convert my component into functional – bytor Apr 18 '20 at 18:23
  • Ok, updated the first and last code block to show you how to update the state as per your question. – Tom Brown Apr 18 '20 at 18:25
  • If I write like this: http://i.piccy.info/i9/2770aac2c1d62cf3c0c17e2dda99dea3/1587236826/67401/1372209/avavav.png I have this error: ```Line 24:8: 'num' is not defined no-undef Line 25:8: 'text' is not defined no-undef Line 26:8: 'textUpper' is not defined no-undef ``` why? – bytor Apr 18 '20 at 19:05
  • Because your state is now continued within `value`. Lines 24, 25 and 26 need to be updated: `{value.num} {value.text} {value.textUpper}`. – Tom Brown Apr 18 '20 at 19:08