AJAX JSON result to react state property

Question

I'm having this component. I want to load the freight values via ajax into a state property of this class.

import React, { Component } from 'react';
import Freight from './Freight';
import CreateFreightEntryModal from './CreateFreightEntryModal';
import createFragment from 'react-addons-create-fragment'; // ES6

class FreightList extends Component {

    constructor(props) {
        super(props);
        this.state = {
            search: "",
            freights: [],
            parent: props.parent,
            updateZonesTable: props.updateZonesTable
        };
        this.loadFreights();
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
          freights: nextProps.freights
        });
    }


    loadFreights() {
        $.ajax({
          type: "POST",
          context:this,
          dataType: "json",
          async: true,
          url: "../data/get/json/freight",
          data: ({ 
              _token : window.Laravel.csrfToken,
          }),
          success: function (data) {

              var arr = $.map(data, function(el) { 
                  return el; 
                }
                return returnArray;
              });

              this.setState({
                freights: arr
              });

          }
      });
    }
...
render() {
        let filteredList = this.state.freights.filter((freight) => {
            let search = this.state.search.toLowerCase();
            //var values = Object.values(freight);
            var values = Object.keys(freight).map(function(itm) { return freight[itm]; });
            var flag = false
            values.forEach((val) => {
                if(val != undefined && val.toString().toLowerCase().indexOf(search) > -1) {
                    flag = true;
                    return;
                }   
            });
            if(flag) 
                return freight;
        });
        return (
            <div className="panel-group">
                <div className="panel panel-default">
                    <div className="panel-heading">
                        <a className="accordion-toggle" data-toggle="collapse" href="#freightListPanelBody"><i className="glyphicon glyphicon-menu-down" aria-hidden="true"></i> Freights</a>
                    </div>
                    <div className="panel-body" id="freightListPanelBody" className="collapse in">
                        <div className="row padding10px">
                            <div className="col-xs-12 col-sm-12 col-md-9 col-lg-9">
                                <div className="form-group">
                                    <button className="btn btn-default" onClick={this.openCreateModal.bind(this)}>Create new entry</button>
                                    <CreateFreightEntryModal onClose={this.onClose.bind(this)} onClick={this.onClick.bind(this)} />
                                </div>
                            </div>
                        </div>

                        <div className="row padding10px">
                            <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                Search
                            </div>
                            <div className="col-xs-12 col-sm-12 col-md-9 col-lg-9">
                                <div className="form-group">
                                    <input className="form-control" type="text" value={this.state.search} placeholder="Search" onChange={this.updateSearch.bind(this)} />
                                </div>
                            </div>
                        </div>
                        <div className="row padding10px">
                            <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                <div className="table-responsive list">
                                    <table className="table table-hover table-striped" id="freightListTable">
                                        <thead>
                                            <tr>
                                                <th className="padding5px whiteSpaceNoWrap borderBottomNone"></th>
                                                <th className="padding5px whiteSpaceNoWrap borderBottomNone">ID</th>
                                                <th className="padding5px whiteSpaceNoWrap borderBottomNone">Company</th>
                                                <th className="padding5px whiteSpaceNoWrap borderBottomNone">Zone Logic</th>
                                                <th className="padding5px whiteSpaceNoWrap borderBottomNone">Freight Type</th>
                                                <th className="padding5px whiteSpaceNoWrap borderBottomNone">Transport Mode</th>
                                                <th className="padding5px whiteSpaceNoWrap borderBottomNone">Haulier</th>
                                                <th className="padding5px whiteSpaceNoWrap borderBottomNone">Haulier 2</th>
                                                <th className="padding5px whiteSpaceNoWrap borderBottomNone">Warehouse</th>
                                                <th className="padding5px whiteSpaceNoWrap borderBottomNone">by quantity</th>
                                                <th className="padding5px whiteSpaceNoWrap borderBottomNone">Quantity type</th>
                                                <th className="padding5px whiteSpaceNoWrap borderBottomNone">&#8960;-Freight</th>
                                                <th className="padding5px whiteSpaceNoWrap borderBottomNone" colSpan="2">Price break</th>
                                                <th className="padding5px whiteSpaceNoWrap borderBottomNone">Place of departure</th>
                                                <th className="padding5px whiteSpaceNoWrap borderBottomNone">Customer</th>
                                                <th className="padding5px whiteSpaceNoWrap borderBottomNone">Product</th>
                                                <th className="padding5px whiteSpaceNoWrap borderBottomNone">Product group</th>
                                                <th className="padding5px whiteSpaceNoWrap borderBottomNone" colSpan="2">Valid</th>
                                                <th className="padding5px whiteSpaceNoWrap borderBottomNone">Min. quantity</th>
                                                <th className="padding5px whiteSpaceNoWrap borderBottomNone">Supplier</th>
                                                <th className="padding5px whiteSpaceNoWrap borderBottomNone">Currency</th>
                                                <th className="padding5px whiteSpaceNoWrap borderBottomNone">No. zip code places</th>
                                                <th className="padding5px whiteSpaceNoWrap borderBottomNone">Haulier is supplier</th>
                                                <th className="padding5px whiteSpaceNoWrap borderBottomNone">from country</th>
                                                <th className="padding5px whiteSpaceNoWrap borderBottomNone">Anzahl_pauschalstaffeln</th>
                                                <th className="padding5px whiteSpaceNoWrap borderBottomNone">Palgewlogik</th>
                                                <th className="padding5px whiteSpaceNoWrap borderBottomNone">Volumengewichtfracht</th>
                                                <th className="padding5px whiteSpaceNoWrap borderBottomNone">Volgewfaktor</th>
                                            </tr>
                                            <tr>
                                                <th className="padding5px whiteSpaceNoWrap borderTopNone"></th>
                                                <th className="padding5px whiteSpaceNoWrap borderTopNone"></th>
                                                <th className="padding5px whiteSpaceNoWrap borderTopNone"></th>
                                                <th className="padding5px whiteSpaceNoWrap borderTopNone"></th>
                                                <th className="padding5px whiteSpaceNoWrap borderTopNone"></th>
                                                <th className="padding5px whiteSpaceNoWrap borderTopNone"></th>
                                                <th className="padding5px whiteSpaceNoWrap borderTopNone"></th>
                                                <th className="padding5px whiteSpaceNoWrap borderTopNone"></th>
                                                <th className="padding5px whiteSpaceNoWrap borderTopNone"></th>
                                                <th className="padding5px whiteSpaceNoWrap borderTopNone"></th>
                                                <th className="padding5px whiteSpaceNoWrap borderTopNone"></th>
                                                <th className="padding5px whiteSpaceNoWrap borderTopNone"></th>
                                                <th className="padding5px whiteSpaceNoWrap borderTopNone">from</th>
                                                <th className="padding5px whiteSpaceNoWrap borderTopNone">until</th>
                                                <th className="padding5px whiteSpaceNoWrap borderTopNone"></th>
                                                <th className="padding5px whiteSpaceNoWrap borderTopNone"></th>
                                                <th className="padding5px whiteSpaceNoWrap borderTopNone"></th>
                                                <th className="padding5px whiteSpaceNoWrap borderTopNone"></th>
                                                <th className="padding5px whiteSpaceNoWrap borderTopNone">from</th>
                                                <th className="padding5px whiteSpaceNoWrap borderTopNone">until</th>
                                                <th className="padding5px whiteSpaceNoWrap borderTopNone"></th>
                                                <th className="padding5px whiteSpaceNoWrap borderTopNone"></th>
                                                <th className="padding5px whiteSpaceNoWrap borderTopNone"></th>
                                                <th className="padding5px whiteSpaceNoWrap borderTopNone"></th>
                                                <th className="padding5px whiteSpaceNoWrap borderTopNone"></th>
                                                <th className="padding5px whiteSpaceNoWrap borderTopNone"></th>
                                                <th className="padding5px whiteSpaceNoWrap borderTopNone"></th>
                                                <th className="padding5px whiteSpaceNoWrap borderTopNone"></th>
                                                <th className="padding5px whiteSpaceNoWrap borderTopNone"></th>
                                                <th className="padding5px whiteSpaceNoWrap borderTopNone"></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        {
                                            filteredList.map((freight)=> {
                                              return (
                                                <Freight freight={freight} onClick={this.handleFreightClick.bind(this)} key={freight.id} />
                                              );
                                            })
                                        }
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default FreightList

My ajax result looks like this:

React throws this error:

Error: Objects are not valid as a React child (found: object with keys {Nummer, Bezeichnung, id}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of Freight.

How can I convert the AJAX JSON result in an acceptable format for react?

UPDATE

Freight component:

import React, { Component } from 'react';

class Freight extends Component {

    constructor(props) {
        super(props);
        this.state = {
            freight: props.freight,
            onClick: props.onClick,
            isChecked: false
        };
    }

    onClick(event) {
        $('#freightListTable').find("input").removeAttr("checked");
        this.setState({isChecked: !this.state.isChecked})
        this.props.onClick(this.state.freight, !this.state.isChecked);
    }

    render() {
        return (

                <tr className="cursorPointer" onClick={this.onClick.bind(this)}>
                    <td>
                        <div className="checkbox">
                          <label>
                            <input type="checkbox" value="" checked={this.state.isChecked} />
                          </label>
                        </div>
                    </td>
                    <td className="whiteSpaceNoWrap">
                        { this.state.freight.ID }
                    </td>
                    <td className="whiteSpaceNoWrap">
                        { this.state.freight.firma }
                    </td>
                    <td className="whiteSpaceNoWrap verticalAlignBottom">
                        { (this.state.freight.Zonenlogik == 1) ? "Yes" : "No" }
                    </td>
                    <td className="whiteSpaceNoWrap">
                        { this.state.freight.frachtart }
                    </td>
                    <td className="whiteSpaceNoWrap">
                        { this.state.freight.transportart }
                    </td>
                    <td className="whiteSpaceNoWrap">
                        <small>{this.state.freight.spedit_nr}</small><br />
                        { this.state.freight.spediteur }
                    </td>
                    <td className="whiteSpaceNoWrap">
                        { this.state.freight.spedit2_nr }
                    </td>
                    <td className="whiteSpaceNoWrap">
                        <small>{this.state.freight.lager_nr}</small><br />
                        { this.state.freight.lager }<br />
                         <span className="label label-danger ">{ this.state.freight.lagerSperr }</span>
                    </td>
                    <td className="whiteSpaceNoWrap">
                        { this.state.freight.per_menge }
                    </td>
                    <td className="whiteSpaceNoWrap">
                        { this.state.freight.mengeneinheit }
                    </td>
                    <td className="whiteSpaceNoWrap">
                        { (this.state.freight.durchschnittsfracht == 1) ? "Yes" : "No" }
                    </td>
                    <td className="whiteSpaceNoWrap">
                        { (this.state.freight.ab_staffelmenge == 1) ? "Yes" : "No" }
                    </td>
                    <td className="whiteSpaceNoWrap">
                        { (this.state.freight.bis_staffelmenge == 1) ? "Yes" : "No" }
                    </td>
                    <td className="whiteSpaceNoWrap">
                        <small>{ this.state.freight.art_zuordnungs_nr }</small><br />
                        { this.state.freight.abgangsort }
                    </td>
                    <td className="whiteSpaceNoWrap">
                        <small>{ this.state.freight.kdnr }</small><br />
                        { this.state.freight.kunde }<br />
                        <span className="label label-danger">{ this.state.freight.kundeSperr }</span> 
                    </td>
                    <td className="whiteSpaceNoWrap">
                        <small>{ this.state.freight.artikel_nr } </small><br />
                        { this.state.freight.artikel }<br />
                         <span className="label label-danger">{ this.state.freight.artikelSperr }</span> 
                    </td>
                    <td className="whiteSpaceNoWrap">
                        <small>{ this.state.freight.wog_nr }</small><br />
                        { this.state.freight.wog }<br />
                         <span className="label label-danger">{ this.state.freight.wogSperr }</span> 
                    </td>
                    <td className="whiteSpaceNoWrap">
                        { this.state.freight.gueltig_von }
                    </td>
                    <td className="whiteSpaceNoWrap">
                        { this.state.freight.gueltig_bis }
                    </td>
                    <td className="whiteSpaceNoWrap">
                        { this.state.freight.mindestmenge }
                    </td>
                    <td className="whiteSpaceNoWrap">
                        <small>{ this.state.freight.lieferanten_nr }</small><br />
                        { this.state.freight.lieferant }<br />
                         <span className="label label-danger">{ this.state.freight.lieferantSperr }</span> 
                    </td>
                    <td className="whiteSpaceNoWrap">
                        { this.state.freight.waehrungName }
                    </td>
                    <td className="whiteSpaceNoWrap">
                        { this.state.freight.suchart_nr }
                    </td>
                    <td className="whiteSpaceNoWrap">
                        { (this.state.freight.spedit_ist_lieferant == 1) ? "Yes" : "No" }
                    </td>
                    <td className="whiteSpaceNoWrap">
                        { this.state.freight.land }
                    </td>
                    <td className="whiteSpaceNoWrap">
                        { this.state.freight.anzahl_pauschalstaffeln }
                    </td>
                    <td className="whiteSpaceNoWrap">
                        { this.state.freight.palgewlogik }
                    </td>
                    <td className="whiteSpaceNoWrap">
                        { this.state.freight.volumengewichtfracht }
                    </td>
                    <td className="whiteSpaceNoWrap">
                        { this.state.freight.volgewfaktor }
                    </td>
                </tr>

        );
    }
}

export default Freight

This error happened to me when trying to render an object inside a component by mistake. — juan garcia, Aug 02 '17 at 15:21
Have you seen this yet: https://stackoverflow.com/questions/33117449/invariant-violation-objects-are-not-valid-as-a-react-child — justDan, Aug 02 '17 at 15:30

score 0 · Answer 1 · answered Aug 02 '17 at 15:53

JSX can only render either elements, null, or string. You're passing an Object, so it will fail as expected with the error. You can simply convert each Object to a string using JSON.stringify.

Invalid scenario (within render()):

const freightObject = { durchschnittsfracht: 1 };
return <div>{freightObject}</div>;

Valid scenario:

const freightObject = { durchschnittsfracht: 1 };
return <div>{JSON.stringify(freightObject)}</div>;

score 0 · Accepted Answer · answered Aug 03 '17 at 09:42

I've solved the problem. The hint with the Freight component helped me a lot. I was searching for the error in the FreightList component the whole time.

I had to change this (on example firma):

former code:

<td className="whiteSpaceNoWrap">
    { this.state.freight.firma }
</td>

solution:

<td className="whiteSpaceNoWrap">
    { (this.state.freight.firma != null) ? this.state.freight.firma.Bezeichnung : '' }
</td>

this.state.freight.firma is an array / object in the JSON response, so that I cannot output this array / object directly. I need to output values of the array / object, not the array / object itself. Thanks for your help!

AJAX JSON result to react state property

2 Answers2