Can variable be passing by function (react js)？

Question

I wrote a class component and mutilple functions in it(class) , but don't know how variable be passing between different function.

class App extends Component {

  state = {
    stringA:null,
    stringB:null
  };

 set_A = (event) =>{
      const stringA = 'text';
 }
 copy_A = (event) =>{
      const stringB = stringA;
 }

 render() {
  return (
    <>
      <button onClick={this.set_A} type="click">set</button>
      <button onClick={this.copy_A} type="click">copy</button>
    </>
  );}
}
export default App;

I reference this docs , but it only said function component without class component. https://www.robinwieruch.de/react-function-component

or, are state and props not a kind of variable？

Spidy · Accepted Answer · 2020-08-11 03:37:22Z

3

You access your properties with this.props and your state with this.state. You change state by calling setState which accepts partial states and merges them into the full state. It also triggers a re-render so that state changes can be seen in the UI.

class App extends Component {

  state = {
    stringA:null,
    stringB:null
  };

  set_A = (event) => {
    this.setState({ stringA: 'text' });
  }
  copy_A = (event) => {
    this.setState({ stringB: this.state.stringA });
  }

  render() {
    return (
      <>
        <button onClick={this.set_A} type="click">set</button>
        <button onClick={this.copy_A} type="click">copy</button>
      </>
    );
  }
}

export default App;

answered Aug 11, 2020 at 3:37

Spidy

40k15 gold badges67 silver badges84 bronze badges

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

5 Comments

Jacob Over a year ago

Nice, I didn't even think of mentioning the re-render on the change from props and state.

Cheng Kao Over a year ago

thank your answer , but when I add console.log(stringB) in copy_A function , it show a gray text of undefined in JS-Console.

Cheng Kao Over a year ago

Sorry ,also it happend a problem , that in copy_A function , if i add this.setState({ stringB: this.state.stringA }); , it show error 'stringA' is not defined no-undef

Jacob Over a year ago

does it need to be this.state I don't know what your Babel ecosystem looks like but the Class React is particular about this even if you set it up not to have a constructor and auto binding.

Cheng Kao Over a year ago

First heard Babel ecosystem , the react version I using is npm create-react-app my-app , It doesn't have much plugin in it , I think I will check Babel ecosystem you said.

Jacob · Accepted Answer · 2020-08-11 03:40:41Z

1

So in React, you would not be assigning a value to a variable like that. You would be utilizing State functionality. For Class-based React you would be using this.setState({stringA: 'text'}) or this.setState({stringB: stringA})

Once the values are in the state you can access them anywhere in the component from the state object this.state.stringB for instance would have the value that was set once you had clicked on copy button

Example

  set_A = (event) => {
    this.setState({ stringA: 'text' });
    console.log(this.state.stringB)
  }
  copy_A = (event) => {
    this.setState({ stringB: this.state.stringA });
  }

React Documentation is also a great resource to reference for Class and Function based component behaviors. https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class

edited Aug 11, 2020 at 3:40

answered Aug 11, 2020 at 3:35

Jacob

7488 silver badges29 bronze badges

1 Comment

Jacob Over a year ago

Happy to help. Feel free to reach out if there are other questions you have.

mohamed ibrahim · Accepted Answer · 2020-08-16 09:00:06Z

You change state by calling setState in class based components Try this :

class App extends Component { 
       state = { stringA:null, stringB:null }; 
       set_A = (e) => { 
             this.setState({...state, stringA: 'text' });
        } 
       copy_A = (e) => { 
             this.setState({ ...state,stringB: this.state.stringA });
       } 
      render() {
             return ( 
                    <> 
                      <button onClick={this.set_A} type="click">set</button> 
                      <button onClick={this.copy_A} type="click">copy</button>
                    </>
             );
       } 
} 
export default App;

Use the spread operator {...state} to change only the targeted piece of state you want to change with no change in the other pieces of the state.

Collectives™ on Stack Overflow

Can variable be passing by function (react js)？

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related