So in the video Guil is using explicit return on array with <li>. That does not work in my app

Question

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import StudentForm from './components/StudentForm';
import ErrorBoundaries from './components/ErrorBoundaries';
import JSTeachers from './components/JSTeachers';

class App extends Component {

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        {/* <ErrorBoundaries> */}
            <StudentForm />
            <JSTeachers />
        {/* </ErrorBoundaries> */}

      </div>
    );
  }
}

export default App;

JSTeachers is a functional components with 3 li. My VS Code underlines that return saying it needs a wrapper. I also have failed to compile because of that. Any thoughts?

import React from "react";

const JSTeachers = () =>
 [
        <li key="1">Dom</li>
        <li key="2">Pat</li>
        <li key="3">Aga</li>
 ]

export default JSTeachers;

Answer 1 · 2020-03-09T20:25:16Z

March 9, 2020 8:25pm

Hi, you just forgot the commas between the components in the array.

const JSTeachers = () =>
 [
        <li key="1">Dom</li>,
        <li key="2">Pat</li>,
        <li key="3">Aga</li>
 ];

By the way usually you wrap <li>'s with a <ul> element. This is what the HTML specs intended for these elements. So you could simply return instead of an array just a <ul> with the <li> inside. This would be no array and just the plain element. Another way without an array would be to wrap the elements with a fragment, see https://reactjs.org/docs/fragments.html. But here I would tend absolutely to wrap the li inside ul, which is semantically correct.

Hope this helps you. Happy coding!

Welcome to the Treehouse Community

Looking to learn something new?

Dom Ss

Dom Ss

So in the video Guil is using explicit return on array with <li>. That does not work in my app

1 Answer

Torben Korb

Torben Korb