Your render method should have return statement react/require-render-return

Viewed 14873

this is my code:

import React, { Component } from "react";
import Person from "./Person/Person";

class Persons extends Component {
  render() {
    this.props.persons.map((person, index) => {
      return (
        <div>
          <Person
            click={() => this.props.clicked(index)}
            name={person.name}
            age={person.age}
            key={person.id}
            changed={event => this.props.changed(event, person.id)}
          />
        </div>
      );
    });
  }
}

export default Persons;
3 Answers

In a React component you need to return your JSX. If this is a functional one it is simply like this:

function Component() {
    return <div>Some JSX</div>;
}

If it is a class component, your render method should return some JSX.

class Component extends React.Component {
    render() { return <div>Some JSX</div>; }
}

Your code has only one return and this is for your map. So, put your code inside a top return.

import React, { Component } from "react";
import Person from "./Person/Person";

class Persons extends Component {
  render() {
    return (
      <div>
        {this.props.persons.map((person, index) => {
          return (
            <div>
              <Person
                click={() => this.props.clicked(index)}
                name={person.name}
                age={person.age}
                key={person.id}
                changed={event => this.props.changed(event, person.id)}
              />
            </div>
          );
        })}
      </div>
    );
  }
}

export default Persons;
class ProfileService extends Component {

constructor(props) {
    super(props);
    this.state = {

    };
}

 render(){        
   <div>
      fdgsdfgsdfg sdfgsdfg
   </div>        
 }
}

you should add the return in the render method.

 render(){
        return(
            <div>
                fdgsdfgsdfg sdfgsdfg
            </div>
        )
    }

Simply return your JSX in render (With React v16+)

....
    render () {
            **return** this.props.persons.map((person, index) => {
                return (
                    <div>...

Wrap you map returning array of elements in a another elements for instance div for React v15 or lower

Related