Ranopriyo Neogy
Ranopriyo Neogy

Reputation: 227

Unable to pass values from dropdown to componentDidMount function

In the below code, I am trying to assign the value of ParentId in { ParentId: 'ou-wmno-yeeol4ok' } from the implemented dropdown select instead of getting it hardcoded, but I don't know how to pass this.state.value in componentDidMount() function. Interestingly if I try to do something like this { ParentId: this.state.value } it doesn't work. Can someone please take a look and help me out. Thanks.

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

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);
        console.log( this.state.value);
        event.preventDefault();
      } 
    
  

    componentDidMount(){
        axios
            .post(`/`, { ParentId: 'ou-wmno-yeeol4ok' })
            .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>
        )
    }
}

Upvotes: 1

Views: 70

Answers (1)

Micahel Hamami
Micahel Hamami

Reputation: 179

{ ParentId: 'this.state.value' }

not works because the this.state.value surrounded with this char '

try this

    componentDidMount(){
    let parentId = this.state.value
  axios.post(`/`, { ParentId: parentId  })
   ... rest of the code ..

Upvotes: 1

Related Questions