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

Posted by Zlatko Iliev
Zlatko Iliev
5,760 Points

I got an error saying: "SearchForm(...): A valid React element (or null) must be returned...." any suggestions?

Hello, I face this issue after I added my SearchForm component, the code seems to be correct. I will copy it below:

SearchForm.js:

import React from 'react';
import {
  Form,
  FormGroup,
  FormControl,
  Button
} from 'react-bootstrap';

const SearchForm = () => {
  <Form inline>
    <FormGroup controlId="formInlineEmail">
      <FormControl type="search" placeholder="enter something..." />
    </FormGroup>
    {' '}
    <Button type="submit">
      search
    </Button>
  </Form>
};

export default SearchForm;

and App.js:

import React, { Component } from 'react';
import { Grid, Jumbotron } from 'react-bootstrap';
import SearchForm from './components/SearchForm';
import Results from './components/Results';

class App extends Component {
  render() {
    return (
      <div>
        <Jumbotron>
          <Grid>
            <h1>Search App</h1>
            <p>This is a simple search app</p>
            <SearchForm />
          </Grid>
        </Jumbotron>
        <Results />
      </div>
    );
  }
}

export default App;

I have the same folder structure as in the project.

GREGORY ASSASIE
GREGORY ASSASIE
3,898 Points
GREGORY ASSASIE
GREGORY ASSASIE
3,898 Points

const SearchForm = () => { <Form inline> <FormGroup controlId="formInlineEmail"> <FormControl type="search" placeholder="enter something..." /> </FormGroup> {' '} <Button type="submit"> search </Button> </Form> };

the Error is ''const SearchForm = () => {''

what you were trying to do is i believe an implicit return.

const SearchForm = () => ( //render your component here )

else const SearchForm = () => { return ( //render component here )

}

Zlatko Iliev
Zlatko Iliev
5,760 Points

It's so confusing, why I can't use the class that extends component here? Or I can but I just have wrong syntax?!?

2 Answers

GREGORY ASSASIE
GREGORY ASSASIE
3,898 Points
GREGORY ASSASIE
GREGORY ASSASIE
3,898 Points

There is nothing wrong with class ... extends Components {} its a slight syntax error

in your functional component SearchForm . you need a return statement

//For implicit return const SearchForm = () => ( <Form inline> <FormGroup controlId="formInlineEmail"> <FormControl type="search" placeholder="enter something..." /> </FormGroup> {' '} <Button type="submit"> search </Button> </Form> );

const SearchForm = () => { return ( <Form inline> <FormGroup controlId="formInlineEmail"> <FormControl type="search" placeholder="enter something..." /> </FormGroup> {' '} <Button type="submit"> search </Button> </Form> )};

GREGORY ASSASIE
GREGORY ASSASIE
3,898 Points
GREGORY ASSASIE
GREGORY ASSASIE
3,898 Points

this should be alot clearer if the syntax highlighting works //for es6 implicit return 

const SearchForm = () => (
  <Form inline>
    <FormGroup controlId="formInlineEmail">
      <FormControl type="search" placeholder="enter something..." />
    </FormGroup>
    {' '}
    <Button type="submit">
      search
    </Button>
  </Form>
);

using the normal return statement 

const SearchForm = () => {
 return (
 <Form inline>
    <FormGroup controlId="formInlineEmail">
      <FormControl type="search" placeholder="enter something..." />
    </FormGroup>
    {' '}
    <Button type="submit">
      search
    </Button>
  </Form>
)};