Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Dom Ss
Dom Ss
4,339 Points
Posted by 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 91,390 Points
Torben Korb
.a{fill-rule:evenodd;}techdegree seal-36
Torben Korb
Front End Web Development Techdegree Graduate 91,390 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!