React Javascript render error

Question

I am currently working on my webapp and in one of its components I am getting some DB data with :

var SelectHund = React.createClass({
          getInitialState: function() {
            return {
              hunde:{}
            };
          },
          componentDidMount: function(){
            var that = this;
            $.ajax({
              type: "POST",
              url: "/foodoo/index.php?method=getDogs",
              data: JSON.stringify(planData),
              success: function(response){
                var hunde = JSON.parse(response);
                console.log(hunde);
                if(hunde.length >= 1){

                  that.setState({
                    hunde: hunde
                  });
                }
              },
              error: function(){
              }
            });
          },
          render: function(){
            if(this.state.hunde.length <= 0){
              return(<div>test</div>);
            }else{
              // console.log(this.state);
              // console.log(this.state.hunde);
              var POS = this.state.hunde.map(function(i){
                  console.log(i);
                  return  <option key={i.id} value={i.weight}>i.name</option>;
              });
              return(<select className="selectHund" name="hund">{POS}</select>);
            }
          }
        });

The component gets called like this:

return (
                    <div>
                      <h2>{this.state.planname}<span className="close">x</span></h2>
                      <SelectHund changeHund={this.changeHund} />
...

With that method I run through the response object with the map function, the console.log of "i" returns the single objects like following :

Object {id: "1", user_id: "1", name: "Balou", weight: "15", activity: "1"…}
Object {id: "2", user_id: "1", name: "Franzi", weight: "70", activity: "1"…}

So I guess there is no error with the object handling.

Unfortunately I keep getting this error in the console :

Uncaught Error: Invariant Violation: SelectHund.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

I have tried calling an external function outside of the ajax function to see if this may cause the error but it doesn't. Some other amateur tries to debug it failed as well - So I need your help ^^

with SelectHund.render(), I'd expect to see a tag such as: <SelectHund onChange={that.props.changeHund} className="selectHund" name="hund"> {POS} </SelectHund> — Georgette Pincin
– Georgette Pincin, Commented Aug 12, 2015 at 19:44
I don't know exactly what you mean - but I have updated my question with the whole component syntax as well as the component call in the parent component — noa-dev
– noa-dev, Commented Aug 12, 2015 at 19:47
So first glance, don't couple your data fetch to a component. If you are using flux, do a fetch inside a grid store. — Georgette Pincin
– Georgette Pincin, Commented Aug 12, 2015 at 19:57
I added it to the component did mount function now but cant get it to work either - cant find a way to update the state with the response value properly and then map throuhg it to create multiple options - updated question — noa-dev
– noa-dev, Commented Aug 12, 2015 at 20:28

David Hellsing · Accepted Answer · 2015-08-12 20:06:00Z

2

Your render method does not return anything. You need to move this line:

return(<select onChange={that.props.changeHund} className="selectHund" name="hund">{POS}</select>);

to outside the success callback. Then you will be facing other problems, but it’s in the right direction.

Instead of doing Ajax inside the render function, move it to another lifecycle method (like componentDidMount) or a data model like Flux.

Then use states or props to handle internal component data (in your example, the hunde object). Following some examples from the docs/tutorials should get you started.

edited Aug 12, 2015 at 20:06

answered Aug 12, 2015 at 19:54

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

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

3 Comments

noa-dev Over a year ago

Can't get it working - I nowed added the ajax call to the componentdidmount function but I cant seem a proper way to set the state with the response value so that I can use it for a dynamic output like my previous method -> thats how my component looks now : pastebin.com/ENMXLK1n

David Hellsing Over a year ago

You’ll get there, it looks like you are on the right track :)

noa-dev Over a year ago

Haha thanks for that motivation speech :p I am in a rush because I won't have time to deal with it untill 2pm and its due today :P

Collectives™ on Stack Overflow

React Javascript render error

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related