ReactJS Code in jsFiddle Shows Syntax Errors

I’m encountering an issue with my React code in jsFiddle, and I can’t seem to figure out what I’m doing wrong. The code seems like valid JSX syntax to me, but when I try running it in jsFiddle, it doesn’t work, and I keep getting syntax errors in the render function. One of the error messages indicates an “unterminated regular expression,” which is confusing because I haven’t used any regular expressions. I suspect there might be an issue with how I’m setting up React in jsFiddle, like not including the correct libraries or not configuring it properly to handle JSX.

Here my code:

codeclass MakeWorkers extends React.Component { 

render() {
    return (<ul>this.props.people.map((person) => {
        const { name, whatCanDo } = person;
            return (<li key={name}>My name is {name}, I can do {whatCanDo}</li>);    
    })</ul>);
  }
}

const people = [
  { name: 'Josh', whatCanDo: 'painting' },
  { name: 'Lay', whatCanDo: 'security' },
  { name: 'Ralph', whatCanDo: 'cleaning' }
];

ReactDOM.render(
  <MakeWorkers people={people}/>,
  document.getElementById('container')
);

The ReactJS code provided has a few issues that are causing it to throw syntax errors in jsFiddle. The main problem lies in how JSX is being used inside the render function. In JSX, JavaScript expressions need to be wrapped in curly braces {} inside the return statement. In your code, the mapping operation (this.props.people.map) is placed directly inside the <ul> element without being properly enclosed in curly braces. This causes the syntax error.

Additionally, in jsFiddle, you need to make sure that the correct libraries are included for React and ReactDOM to work correctly. Ensure that both React and ReactDOM libraries are included, and the JavaScript type is set to “Babel” to support JSX syntax.

Corrected Code:

codeclass MakeWorkers extends React.Component {
  render() {
    return (
      <ul>
        {this.props.people.map((person) => {
          const { name, whatCanDo } = person;
          return <li key={name}>My name is {name}, I can do {whatCanDo}</li>;
        })}
      </ul>
    );
  }
}

const people = [
  { name: 'Josh', whatCanDo: 'painting' },
  { name: 'Lay', whatCanDo: 'security' },
  { name: 'Ralph', whatCanDo: 'cleaning' }
];

ReactDOM.render(
  <MakeWorkers people={people} />,
  document.getElementById('container')
);

Explanation of Corrections:

1. Enclosed the Mapping Operation in Curly Braces: The this.props.people.map is now wrapped in {}, allowing JavaScript expressions to be used within the JSX.
2. Corrected JSX Syntax for <ul> and <li> Elements: Each <li> item is rendered using proper JSX syntax, and each item includes a key attribute for uniqueness.
3. Ensure the Proper Libraries Are Loaded in jsFiddle: Make sure to include React and ReactDOM libraries and set the JavaScript type to “Babel” in jsFiddle to support JSX.

With these changes, the code should work correctly in jsFiddle. Make sure to check that the right versions of React and ReactDOM are included in your jsFiddle setup.