CODEWITHSUNDEEP
javascriptreactjs
Chris Hansen
Chris Hansen

Reputation: 8635

Returning html in React

I have the following code that I want to return as HTML output.

render () {
    var ret = "";
    var x = 0;
    var name = val + "[]";
    var v = this.state.course[val];
    
    for (x = 0; x < v.length; x++) {
        var label = val + x;
        var vv = this.state.course[val][x];
        input = <input type="text" name={name} value={vv} onChange={(event) => {
            var newCourse = {...this.state.course};
            newCourse[val][x] = event.target.value;
            this.setState({course: newCourse})
        }} key={val}/>;
    
        ret += <div>
            <label>{label}</label><br/><br/>
            {input}
        </div>;
    }
    ret += <button onClick={this.addInput.bind(this, val)} />
    ret += "</div>";
    return ret;
}

Instead it returns as [object Object][object Object][object Object][object Object][object Object][object Object]

I want to render the ret output as HTML to the DOM. What am I doing wrong?

Upvotes: 0

Views: 1080

Answers (2)

John Smith
John Smith

Reputation: 4353

This <button onClick={this.addInput.bind(this, val)} /> is just syntactic sugar for calling React.createElement. It returns an object.

Therefore, you're concatenating an object to a string. Something similar to

const a = "string" + {};
// a equals "string[objectObject]"

Instead, you should go along the lines of:

const someFunc = () => {
    const arr = [];

    for (let i = 0; i < 20; i++) {
        arr.push(<div>{i}</div>);
    }
    return <div>{arr}</div>
}

Upvotes: 2

dwosk
dwosk

Reputation: 1257

Instead of defining ret as a string, try defining it as an array and pushing those elements to the array. Appending strings like this won't give you proper JSX.

Try looking here: React is rendering [object object] rather than the JSX

Upvotes: 1

Related Questions