'React component run error.Uncaught Error: Minified React error #31

I am trying to return some html label when write render in my component. Code like this:

 import React, {Component} from 'react';
import Request from 'react-http-request';


class NameForm extends React.Component {
constructor() {
    super();
    this.state = {value: '', result: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}

handleChange(event) {
    this.setState({value: event.target.value});
}

handleSubmit(event) {
    var content = this.state.value;

    var split = content.split(/\s+/);

    var queryObject = new Object();

    queryObject.law = null;
    queryObject.character = null;
    queryObject.lawRule = null;
    if (split.length == 1) {
        queryObject.law = split[0];
    }
    else if (split.length == 2) {
        queryObject.law = split[0];
        queryObject.character = split[1];
    }
    else if (split.length > 2) {
        queryObject.law = split[0];
        queryObject.character = split[1];
        queryObject.lawRule = split[2];
    }
    // var json = JSON.stringify(queryObject);
    var json = "{\"law\":\"军工企业股份制改造实施暂行办法\",\"character\":\"第二章\"}";

    var test = JSON.stringify(<Fetchs args={json}/>);


    var request = new XMLHttpRequest();
    request.open('POST', 'http://localhost:8080/path', false);
    request.setRequestHeader('Content-Type', 'application/json');
    var resp = '';
    request.onreadystatechange = function (e) {
        if (this.status == 200) {
            resp = this.response;
        }
    }

    request.send(json);

    // console.info("XMLHttpRequest test is " + JSON.stringify(resp));

    // console.info("test is " + resp);

    this.setState({result: resp});

    event.preventDefault();
}


render() {

    // console.log("prite"+this.state.result.queryResults);
    // console.log("100"+this.strToJson(this.state.result));
    // console.log("200"+this.strToJson(this.state.result.queryResults));
    // alert(this.state.result);

    var parse = JSON.parse(this.state.result ? this.state.result : null);
    var out = parse ? parse.queryResults : null;
    for (var i = 0; out != null && i < out.length; i++) {
        if (out[i].keyword == null) {
            out[i].keyword = "{}";
            console.info("keyword is null");
        }
        else {
            // this.state.result.queryResults.keyword
            console.info("keword is not null");
            out[i].keyword = JSON.stringify(out[i].keyword);
        }
    }


    return (
        <div>
            <form onSubmit={this.handleSubmit}>
                <label>
                    Name:
                    <input type="text" value={this.state.value} onChange={this.handleChange}/>
                </label>
                <input type="submit" value="Submit"/>
            </form>
            <table border="10" >
                <tr>
                    <thead>
                    <th>GraphName</th>
                    <th>Relation</th>
                    <th>Content</th>
                    <th>KeyWord</th>
                    </thead>
                </tr>
                <tbody>

                {out}
                </tbody>
            </table>

        </div>
    );
 }
}


ReactDOM.render(<NameForm/>, document.getElementById('react'))

out is a array parsed from json data, like this:

My problem is that I want show out on page by table label, But use {out} I get a error, like this:

What troubled me is how to show out array in a table.

javascript reactjs

Solution 1:^[1]

I believe your trouble maybe caused by the fact that you try to return array of objects in your react render method, instead try to map your objects and insert necessary fields in <p></p> tags. For example:

out.map(
  (object) => <p>object.content</p>
)

etc... Hope it helps!

Solution 2:^[2]

Future Readers!

In my case I had incorrectly tried to output a string during the template iteration:

// Working
return <div>{list.map((name, i) => <div key={i}> {name} </div>}</div>
// Broken
return <div>{list.map((name, i) => <div key={i}> {{name}} </div>}</div>
//                                                ^ Incorrect (causes error #31)

Solution 3:^[3]

When i encountered this error, my first gaze of was that the difference themes and styling components i was using were conflicting. But latter own i discovered i was rendering wrong data format from my database. The React Form field expected to receive a string but i was supplying an Object

Solution 4:^[4]

When you do open with vs code on a folder then you create the react app in the terminal . It will generate a new folder on your actual folder make sure your terminal command is exceuted on the generated react app folder.

Solution 5:^[5]

In my case:

html: <span>{reason}</span>
But the reason is object type => Error: Minified React error #31;
reason: {
  code: "other",
  id: 1,
  name: "Other",
  sub_reasons: []
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Anatoly Strashkevich
Solution 2	Ben Winding
Solution 3	Mbanda
Solution 4	Stael125
Solution 5	Thaianh34

'React component run error.Uncaught Error: Minified React error #31

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]