React - prop array of values

Question

This is my SearchForm.js class, experience prop must be array of values with id and name

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

class SearchForm extends React.Component {
    constructor(props) {
      super(props)

      this.state = {
       position: '',
       area: '',
       date: '',
       experience: {
            type: Array,
            default: () => []
          }  
      }        
     }

    componentDidMount() {
        axios({
            method: 'GET',
            url: 'https://example.com/dictionaries/', 
            headers: { 
                'User-Agent': 'React App/1.0 ([email protected])', 
                'HH-User-Agent': 'React App/1.0 ([email protected])',  
                'Content-Type':'application/x-www-form-urlencoded',
            }
            })
          .then(function (response) {
            console.log(response.data.experience);
          })
          .catch(function (error) {
            console.log(error);
          });
    }


    render() {
        return ( 
            <form className='form search-form' onSubmit={this.handleSubmit}>
                <div className="form-row">         
                    <div className="form-group col-md-2">
                        <label htmlFor="experience">Experience</label>
                        <select className="form-control" name="experience" id="experience" onChange={this.handleExperienceChange} value={this.state.experience}>
                {/* <option key={this.props.experience.id} value={this.props.experience.name}>
                            {this.props.experience.name}
                        </option> */}
                        </select>
                    </div>
                </div>  
            </form>
        )
    }
}

export { SearchForm }

as result I get

How to put this values from response.data.experience in experience prop?

Use arrow functions, it'll lexically scope this. Change then((function(response) {...} to then((response) => {...} — Dan
– Dan, Commented Mar 20, 2018 at 8:59

Sagar Jajoriya · Accepted Answer · 2018-03-20 09:44:01Z

2

You can change the state like

axios({
    method: 'GET',
    url: 'https://example.com/dictionaries/', 
    headers: { 
        'User-Agent': 'React App/1.0 ([email protected])', 
        'HH-User-Agent': 'React App/1.0 ([email protected])',  
        'Content-Type':'application/x-www-form-urlencoded',
    }
}).then((response) => {
    console.log(response.data.experience);
    this.setState({experience: response.data.experience})
}).catch(function (error) {
    console.log(error);
});

And you can loop through the experience array by using this :

{ this.state.experience.map((value, index) => <option key={value.id} value={value.name}> {value.name} </option> ) }

edited Mar 20, 2018 at 9:44

answered Mar 20, 2018 at 8:56

Sagar Jajoriya

2,3751 gold badge12 silver badges18 bronze badges

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

8 Comments

Heidel Over a year ago

TypeError: Cannot read property 'setState' of undefined at SearchForm.js:37 in this case

Sagar Jajoriya Over a year ago

answer updated. You also need to bind the function to the class for use this inside

Heidel Over a year ago

.then((response) => {             this.setState({experience: response.data.experience});             console.log(this.experience);             })

doesn't work either - Undefined in console

Heidel Over a year ago

When I try console.log(this.experience); I get Undefined

Sagar Jajoriya Over a year ago

for get values form state, use this.state.experience

|

benjamin Rampon · Accepted Answer · 2018-03-20 08:56:38Z

1

experience is in your state, so you have to use the setState method like :

this.setState({experience: response.data.experience})

answered Mar 20, 2018 at 8:56

benjamin Rampon

1,4281 gold badge13 silver badges19 bronze badges

3 Comments

Heidel Over a year ago

TypeError: Cannot read property 'setState' of undefined at SearchForm.js:37 in this case

nikhil mehta Over a year ago

it is a scoping issue. you need to declare var _ this = this; outside the callback and use _this in the callback

benjamin Rampon Over a year ago

Yes, or you can use arrow functions.

DrunkDevKek · Accepted Answer · 2018-03-20 09:18:24Z

1

Does this solution work for you ? Let me know!

Edit: Added conditional rendering for your <option> if your experience is not yet defined

import React from "react";
import ReactDOM from "react-dom";
import axios from "axios";

class SearchForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
        position: "",
        area: "",
        date: "",
        experience: {
            type: Array,
            default: () => [],
        },
    };
}

componentWillReceiveProps = NextProps => {
    if (NextProps.experience !== this.props.experience) {
        this.setState({ experience: NextProps.experience });
    }
};

componentDidMount() {

    axios({
        method: "GET",
        url: "https://example.com/dictionaries/",
        headers: {
            "User-Agent": "React App/1.0 ([email protected])",
            "HH-User-Agent": "React App/1.0 ([email protected])",
            "Content-Type": "application/x-www-form-urlencoded",
        },
    })
        .then(response => {
            console.log(response.data.experience);
            this.setState({ experience: response.data.experience });
        })
        .catch(function(error) {
            console.log(error);
        });
}

render() {
    return (
        <form className="form search-form" onSubmit={this.handleSubmit}>
            <div className="form-row">
                <div className="form-group col-md-2">
                    <label htmlFor="experience">Experience</label>
                    <select
                        className="form-control"
                        name="experience"
                        id="experience"
                        onChange={this.handleExperienceChange}
                        value={this.state.experience}
                    >
                        {this.state.experience.length > 0 && 
                        <option
                            key={this.state.experience.id}
                            value={this.state.experience.name}
                        >
                            {this.state.experience.name}
                        </option> }
                    </select>
                </div>
            </div>
        </form>
    );
}
}

edited Mar 20, 2018 at 9:18

answered Mar 20, 2018 at 8:59

DrunkDevKek

4694 silver badges17 bronze badges

8 Comments

Heidel Over a year ago

TypeError: Cannot read property 'setState' of undefined at SearchForm.js:37 in this.setState({ experience: response.data.experience });

DrunkDevKek Over a year ago

Updated my answer, what does it say now ? Could be a this scope issue

Heidel Over a year ago

I used your code

.then((response) => {             this.setState({experience: response.data.experience});             console.log(this.experience);             })

but console.log(this.experience); - undefined

DrunkDevKek Over a year ago

You need to do: .then((response) => { this.setState({experience: response.data.experience}, () => console.log(this.state.experience));

Heidel Over a year ago

ok, it helped. but

{this.state.experience.length > 0 &&                          <option                             key={this.state.experience.id}                             value={this.state.experience.name}                         >                             {this.state.experience.name}                         </option> }

doesn't work, options are empty

|

Collectives™ on Stack Overflow

React - prop array of values

3 Answers 3

8 Comments

3 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

3 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related