CODEWITHSUNDEEP
javascriptbabeljsreactjsjsx
elad silver
elad silver

Reputation: 9695

ReactDOM.render Expected the last optional `callback` argument to be a function

I am new to react and I wrote the code below and got

ReactDOM.render Expected the last optional `callback` argument to be a function. `Instead received: Object`

This is my code 

var Stats = React.createClass({
    render: function () {
        return (
            <article className="col-md-4">
                <article className="well">
                    <h3>{this.props.value}</h3>
                    <p>{this.props.label}</p>
                </article>
            </article>
        )
    }
});

ReactDOM.render(
    <Stats value={"255.5K"} label={"People engaged"}/>,
    <Stats value={"5K"} label={"Alerts"}/>,
    <Stats value={"205K"} label={"Investment"}/>,
    document.getElementById('stats')
);

What am I doing wrong?

Upvotes: 3

Views: 4594

Answers (2)

devellopah
devellopah

Reputation: 471

You need provide a react element as first argument and mount node as second argument exactly. So you can do this.

const LotsOfStats = React.createClass({
    render: function () {
        return (
            <div>
                <Stats value={"255.5K"} label={"People engaged"}/>
                <Stats value={"5K"} label={"Alerts"}/>
                <Stats value={"205K"} label={"Investment"}/>
            </div>
        );
    }
});

ReactDOM.render(
    <LotsOfStats />,
    document.getElementById('stats')
);

Upvotes: 3

Waiski
Waiski

Reputation: 9680

You are giving ReactDom.render four arguments - three Stats components and the element. The function expects only one element before the container element. Thus you need to somehow group the elements together, for example like this:

ReactDOM.render(
  <div>
    <Stats value={"255.5K"} label={"People engaged"}/>
    <Stats value={"5K"} label={"Alerts"}/>
    <Stats value={"205K"} label={"Investment"}/>
  </div>,
  document.getElementById('stats')
);

Upvotes: 6

Related Questions