CODEWITHSUNDEEP
reactjs
redixhumayun
redixhumayun

Reputation: 1844

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?

Upvotes: 0

Views: 1743

Answers (1)

Hosar
Hosar

Reputation: 5292

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>
            )            
    }

Upvotes: 2

Related Questions