Accessing state variable with current state outside `render()` , `handleSubmit()`, `handleChange()`-CodePudding

Is there a way I can render updated state variables value in a different function other than render() , handleSubmit(), handleChange()

export default class users extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Users: [],
            value: ''
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({value: event.target.value});
      }
      
    handleSubmit(event) {
        //alert('Your favorite flavor is: '   this.state.value);
        event.preventDefault();
        console.log(this.state.value)
      }

CodePudding user response：

You can access them anywhere...

see example in foo

export default class users extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Users: [],
            value: ''
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    foo() {
     const {Users, value} = this.state
     console.log(Users, value)
    }

    handleChange(event) {
        this.setState({value: event.target.value});
      }
      
    handleSubmit(event) {
        //alert('Your favorite flavor is: '   this.state.value);
        event.preventDefault();
        console.log(this.state.value)
      }

CodePudding user response：

It is always referring to the default value which is value: '' although if you see my render function i am using setState to set the current value of the dropdown select. I am looking to pass the selected dropdown value to ParentId: 'ou-wmno-rbeuj1z4' instead of hardcoding it in componentDidMount().

import React, {Component} from 'react'
import axios from '../../axios'

export default class users extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Users: [],
            value: 'test-1'
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({value: event.target.value});
      }
      
    handleSubmit(event) {
        this.setState({value: this.state.value});
        event.preventDefault();
        // console.log(this.state.value)
      } 

      foo() {
        const {value} = this.state
        console.log( value)
       }

    componentDidMount(){
        this.foo()
        axios
            .post(`/`, { ParentId: 'ou-wmno-rbeuj1z4' })
            .then(res => {
                const data = res.data
                const valuesArray = JSON.parse(data)
                console.log(valuesArray)

                const users = valuesArray.Accounts.map(u =>
                    <tr key={u.Id}>  
                    <td>{u.Name}</td>
                    <td>{u.Arn}</td>
                    <td>{u.Id}</td>
                    <td>{u.Email}</td>
                    <td>{u.JoinedMethod}</td>
                    <td>{u.JoinedTimestamp}</td>
                    <td>{u.Status}</td>
                    </tr>
                    )

                    this.setState({
                        users
                    })

            })
            .catch((error) => {
                console.log(error)
            })
        
    }
  
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
            <div>
            <h1 id='awsorg'>AWS Accounts in Organization</h1>
            <div>
            <label>
          Select AWS Organization
          <select id="dropdown" value={this.state.value} onChange={this.handleChange}>
            <option value="test-1">test-1</option>
            <option value="ou-wmno-yeeol4ok">Suspended</option>
            <option value="test-3">test-3</option>
            <option value="test-4">test-4</option>
          </select>
          <input type="submit" value="Submit" />
        </label>
            </div>
            <table id='accounts'>
               <tbody>
                  <tr>
                 <th>Name</th>
                 <th>Arn</th>
                 <th>id</th>
                 <th>Email</th>
                 <th>JoinedMethod</th>
                 <th>JoinedTimestamp</th>
                 <th>Status</th>
                  </tr>
                  {this.state.users}
               </tbody>
            </table>
         </div>
         </form>
        )
    }
}