React setState from array index

Question

I am creating a companies page in my application. The url is as follows: example.com/companies/google

I am getting the data from an API running localhost 4000 and, when it returns that data, it is returning this in the console.

While this is fine, it seems if I want to set my state to just the one object I would have to do something like this.setState = { company: res.data[0] }. To me it seems like there would be a better way to do this considering it will only ever return one object. Sidenote: I am just now entering in the Javascript/react world so excuse me if im missing the obvious here. Below is just the component mount function that returns the response data in the console.

Is there a better way to set the state of the company rather than setting it based on the first index in the array it returns?

componentWillMount() {
    axios
      .get(`http://localhost:4000/companies/${this.props.match.params.name}`)
      .then(res => {
        console.log(res.data);
      });
  }

that seems like the API needs to be changed. What is your question? — brietsparks
– brietsparks, Commented Nov 1, 2018 at 19:07

mndewitt · Accepted Answer · 2018-11-01 19:11:13Z

1

This is perfectly acceptable if you know you always want the first result. Sometimes APIs are weird or designed to be consumed as lists, but we always know we want the first result. The only thing you might also want to check is if res.data could ever be null or undefined, to avoid an error:

if (res.data) {
  this.setState({ company: res.data[0] })
}

answered Nov 1, 2018 at 19:11

mndewitt

663 bronze badges

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

Comments

Mike Feltman · Accepted Answer · 2018-11-01 19:48:56Z

0

Generally you want to separate your data interactions from your components as much as possible.

I'd suggest creating a service that wraps your api and returns data to your components in the format you'd like.

Place something like the code below into another .js file and import it into your component:

export default class companyService {
    get(companyName) {
          return axios
      .get(`http://localhost:4000/companies/${companyName}`)
      .then(res => {
        return res.data[0];
      });
    }

}

Then in your componentWillMountMethod call companyService.get(this.props.match.params.name)

answered Nov 1, 2018 at 19:48

Mike Feltman

5,1721 gold badge19 silver badges39 bronze badges

Collectives™ on Stack Overflow

React setState from array index

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related