Objects are not valid as a React child react error?

Question

could you please tell me why I am getting this error:

Objects are not valid as a React child (found: object with keys {seo_val, text_val}). If you meant to render a collection of children, use an array instead.

I am trying to hit http request and try to make dropdown .

import React from "react";

class DropDown extends React.Component {
  constructor(props) {
    super(props);
    console.log(this.props);
  }

  render() {
    const makeDropDown = () => {
      console.log(this.data);
      return this.props.data.map(x => {
        return <option>{x}</option>;
      });
    };
    return (
      <div>
        <div>
          <select>{makeDropDown()}</select>;
        </div>
      </div>
    );
  }
}

export default DropDown;

Sandbox.

Mayank Shukla · Accepted Answer · 2018-02-28 15:51:49Z

4

Full error message:

Objects are not valid as a React child (found: object with keys {seo_val, text_val}).

Error is very clear, you are trying to render an object in jsx that contains two keys:

seo_val: "..."
text_val: "..."

Write it like this, (render the value that you want):

return <option key={x.seo_val}>{x.text_val}</option>;

Working sandbox.

edited Feb 28, 2018 at 15:51

answered Feb 28, 2018 at 15:43

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

1 Comment

NiftyAsp Over a year ago

This is the correct answer, you can't just render objects, you need to render one of the values.

Stretch0 · Accepted Answer · 2018-02-28 15:48:40Z

-1

Looks like x is an object.

Try

import React from "react";

class DropDown extends React.Component {
  constructor(props) {
    super(props);
    console.log(this.props);
  }

  render() {

    return (
      <div>
        <div>
          <select>{
            this.props.data.map(x => {
              return (<option key={x}>echo</option>);
            })
          }</select>;
        </div>
      </div>
    );
  }
}

export default DropDown;

And you'll see it works. Replace echo with {x} throws the error you mentioned.

edited Feb 28, 2018 at 15:48

answered Feb 28, 2018 at 15:40

Stretch0

9,40215 gold badges95 silver badges162 bronze badges

Collectives™ on Stack Overflow

Objects are not valid as a React child react error?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related