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;

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;

• javascript
• reactjs

• Wele to Stackoverflow. Please edit your question to provide a problem description. This might prevent ambigious answers or wrong answers. It also helps people who will have the same issue as you. For guidance please read how to ask questions and how to create a minimal example – 5th Commented Sep 20, 2018 at 15:25

3 Answers 3

In a React ponent 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 ponent, 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