Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Dom Ss
Dom Ss
4,339 Points

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

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;

1 Answer

Torben Korb
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree seal-36
Torben Korb
Front End Web Development Techdegree Graduate 88,561 Points

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!