2

I had create a new react native project by init a tabs (TypeScript) . this example has 2 tabs , each tab content in a tsx file that just have a single

export default function

and how can I use sates in that function .

enter image description here

and how can I use sates in that function .

kiamoz
  • 714
  • 1
  • 7
  • 18

2 Answers2

2

You can use state in a functional component as follows: (example taken from this link: https://reactjs.org/docs/hooks-intro.html)

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

To break this down,

const [count, setCount] = useState(0);

basically means the same thing as

this.state = {
    count: 0; // 0 is what the count state variable initializes to
}

setCount(newStateCount) {
    count = newStateCount; // you change the state using setCount(1), for example. 
    // now count goes from 0 to 1 in this case.
}

React basically does the implementation of both for you in that single line, and all you have to do is call setCount in order to change the count state instead of this.state.count = newValue.

In response to the comment under this original answer: You can set state for multiple properties like so: how to write a multi lines state with Hooks useState in ReactJs

   const [state, setState] = useState({
        step: 1,
        firstName: '',
        lastName: '',
        jobTitle: '',
        jobCompany: '',
        jobLocation: '',
    });
   // Setting state like:
   setState(prev=>{...prev,firstName:'Joey'});
Andrew
  • 432
  • 2
  • 14
  • Thank you , it's means I have to create a function like const [count, setCount] = useState(0); for each state's property set ? – kiamoz Nov 23 '20 at 07:11
  • Yes. So if you have 2 properties, then you'd have two lines similar to that. – Andrew Nov 23 '20 at 07:12
  • could you please write 2 properties in 1 line please ? thanks in advance . and it's for TypeScript yes ? – kiamoz Nov 23 '20 at 07:28
  • @kiamoz I have edited the answer with an example on how to set state for multiple properties using the same useState call. It will work with typescript. – Andrew Nov 23 '20 at 07:33
  • thank for all your helps , could you please mark + my question ? I ca't ask more question .. – kiamoz Nov 23 '20 at 09:49
  • @Andrew I have other question , what means prev in setState(prev=>{...prev,firstName:'Joey'}); thank you – dev moore Nov 26 '20 at 06:06
  • in that context, it just keeps the previous values the same (whatever they are in state) and just updates the first name. for information the actual operator (...) check this link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax – Andrew Nov 27 '20 at 18:08
1

Using state in function components was made possible through React Hooks: https://reactjs.org/docs/hooks-intro.html

So, you can do something like this, with the useState hook:

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
Nsevens
  • 2,588
  • 1
  • 17
  • 34