How do I add a button into a stateless component?

Question

Ok,

this one was to be simple, but I am a couple of hours here trying to figure out how could I solve this issue.

First of all, I'm doing a React course, and I'd submitted the project the second time for the reviewer avaliation. Certainly is not the same reviewer and he/she has asked me to take other modifications different to the previous one.

The fact is that, the component was working properly, but the reviewer has suggested me to transform the component which was a Class Component into a Function Component and there was where my problem has started.

Please, I appologize but I'll have to put the entire stateless component code (which is a little big, I think), to explain next what is happen:

import React from 'react';

import { Link } from 'react-router-dom';

import Book from './Book';



function Home (props) {

  return (

    <div className='list-books'>

      <div className='list-books-title'>

        <h1>MyReads</h1>

      </div>

      <div className='list-books-content'>

        <div>

          <div className='bookshelf'>

            <h2 className='bookshelf-title'>Currently Reading</h2>

            <div className='bookshelf-books'>

              <ol className='books-grid'>

              {

                  props.books

                    .filter(book => book.shelf === 'currentlyReading')

                    .map(book => (

                      <li key={book.id} >

                        <Book 

                          book={book}

                          changeShelf={props.changeShelf}

                          actualShelf='currentlyReading'

                        />

                      </li>

                    ))

                }

              </ol>

            </div>

          </div>

          <div className='bookshelf'>

            <h2 className='bookshelf-title'>Want to Read</h2>

            <div className='bookshelf-books'>

              <ol className='books-grid'>

                {

                  props.books

                    .filter(book => book.shelf === 'wantToRead')

                    .map(book => (

                      <li key={book.id} >

                        <Book 

                          book={book}

                          changeShelf={props.changeShelf}

                          actualShelf='wantToRead'

                        />

                      </li>

                    ))

                }   

              </ol>

            </div>

          </div>

          <div className='bookshelf'>

            <h2 className='bookshelf-title'>Read</h2>

            <div className='bookshelf-books'>

              <ol className='books-grid'>

              {

                  props.books

                    .filter(book => book.shelf === 'read')

                    .map(book => (

                      <li key={book.id} >

                        <Book 

                          book={book}

                          changeShelf={props.changeShelf}

                          actualShelf='read'

                        />

                      </li>

                    ))

                }

              </ol>

            </div>

          </div>

        </div>

      </div>

      <div className='open-search'>

        <Link to='/search'>

          <button onClick={() => this.setState({ showSearchPage: true })}>

            Add a book

          </button>

        </Link>

      </div> 

    </div>  

  );

}  


export default Home;

As I've said, everything was working properly when the component was a Class Component, but when I've transformed it into a Function Component it's ocurred an error in the button rendering (line 78, one of the last ones), the error which appears to me is the following one:

Anyone could help me to figure out how could I add a button into a stateless component?

I imagine there is something to do about setState maybe, I really don't know.

Thanks in advance.

Answer 1

If you want to use value of showSeachPage, use variable directly "showSearchPage" not state.showSearchPage. Here default value for this variable is false. In case you want to go through the documentation https://reactjs.org/docs/hooks-intro.html

import React, { useState } from 'react';

import { Link } from 'react-router-dom';

import Book from './Book';



function Home (props) {

const [showSearchPage, setShowSearchPage] = useState(false);

  return (

    <div className='list-books'>

      <div className='list-books-title'>

        <h1>MyReads</h1>

      </div>

      <div className='list-books-content'>

        <div>

          <div className='bookshelf'>

            <h2 className='bookshelf-title'>Currently Reading</h2>

            <div className='bookshelf-books'>

              <ol className='books-grid'>

              {

                  props.books

                    .filter(book => book.shelf === 'currentlyReading')

                    .map(book => (

                      <li key={book.id} >

                        <Book 

                          book={book}

                          changeShelf={props.changeShelf}

                          actualShelf='currentlyReading'

                        />

                      </li>

                    ))

                }

              </ol>

            </div>

          </div>

          <div className='bookshelf'>

            <h2 className='bookshelf-title'>Want to Read</h2>

            <div className='bookshelf-books'>

              <ol className='books-grid'>

                {

                  props.books

                    .filter(book => book.shelf === 'wantToRead')

                    .map(book => (

                      <li key={book.id} >

                        <Book 

                          book={book}

                          changeShelf={props.changeShelf}

                          actualShelf='wantToRead'

                        />

                      </li>

                    ))

                }   

              </ol>

            </div>

          </div>

          <div className='bookshelf'>

            <h2 className='bookshelf-title'>Read</h2>

            <div className='bookshelf-books'>

              <ol className='books-grid'>

              {

                  props.books

                    .filter(book => book.shelf === 'read')

                    .map(book => (

                      <li key={book.id} >

                        <Book 

                          book={book}

                          changeShelf={props.changeShelf}

                          actualShelf='read'

                        />

                      </li>

                    ))

                }

              </ol>

            </div>

          </div>

        </div>

      </div>

      <div className='open-search'>

        <Link to='/search'>

          <button onClick={() => setShowSearchPage(true)}>

            Add a book

          </button>

        </Link>

      </div> 

    </div>  

  );

}  


export default Home;

Answer 2

In order to get the same effect form a functional component as a class component you need to use the state hook: https://reactjs.org/docs/hooks-overview.html#state-hook

try to read the docs it's not hard and it will help you get better!

in your exemple use this:

const [showSearchPage, setShowSearchPage] = useState(false);

and when you click on the button use

<button onClick={() => setShowSearchPage(true)}>

"setShowSearchPage(true)" will have the same effect like setState this.setState({ showSearchPage: true })}

hope that helped ! and again pls read the docs to get a good grasp of the state hook in a functional component