Zaid Humayun Zaid Humayun - 9 days ago 6
React JSX Question

Valid React element not being returned from render method

I am at a loss as to why my React component is not rendering correctly. It all looks fine to me. Maybe somebody else could point out something I've missed.

import React, {Component} from 'react';

class Voting extends Component {

renderButton(item) {
return (
<button type='button' className='btn btn-primary'>
{item}
</button>
)
}

render() {
return this.props.pair.map(item => {
return(
<div>
{this.renderButton(item)}
</div>
)
});
}
}

export default Voting;


Here is the error


bundle.js:9044 Uncaught Error: Voting.render(): A valid React element
(or null) must be returned. You may have returned undefined, an array
or some other invalid object.(…)


When I return a simple div with Hello World inside it from my render() method, it returns fine and gets displayed. I logged the return from the function call to the renderButton method like so:

console.log(this.renderButton(item));


and I get an object which has the props. Although I am not sure an object is supposed to be returned?

Answer

You need to wrap your return in a div, components should return only one element.

 render() {             
            return (
                <div>
                    { this.props.pair.map(item => this.renderButton(item)) }
                </div>
            )            
    }
Comments