How to pass a parameter from a SearchBox to a fetch url in React

Question

I have two React stateful Components - SearchBox and FetchMusic. My plan is for the SearchBox component to receive input from the user and pass it into a fetch url in my FetchMusic component (using template string). My code is below.

import React, { Component } from 'react';

class SearchBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange = (e) => {
    e.preventDefault();
    this.setState({value: e.target.value});
  }
  handleSubmit = (e) => {
    e.preventDefault();
    let userInput = this.state.value;
    this.props.onSearchBox(userInput); 
    console.log(`You searched for the movie ${userInput}`);      
  }

  render() {
    return (
      <div className="search-container">
        <form className="form-search" onSubmit={this.handleSubmit}>
          <input 
            type="text" 
            value={this.state.value}
            onChange={this.handleChange}
            placeholder="Search Movie Title..."
          />
        </form>
        <h5>{this.state.value}</h5>
      </div>
    );
  }
}

export default SearchBox;

import React, { Component } from 'react';
import SearchBox from './SearchBox';

class FetchMovie extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoad: false,
      data: []
    };
  }

  componentDidMount() {
    const fetchConfig = {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    };
    
    fetch(`http://www.omdbapi.com/?i=tt3896198&apikey=dfbcc791&t=${<SearchBox onSearchBox={this.handleSubmit} />}`, fetchConfig)
      .then(res =>  res.json())
      .then(movies => { 
        this.setState({
          isLoad: false,
          data: movies
        });
      },
        (error) => { 
          this.setState({
            isLoad: true,
            error
          });
        }
      )
  // }
  }
  render() {
    const { error, isLoad, data } = this.state;
    if (error) {
      return (
        <div>Error: {console.log(error.message)}</div>
      );
    } else if (isLoad) {
      return (
      <div>{console.log('Loading. . . . .')}</div>
      );
    } else {
      return (
        <div className="display">
          <div className="column1">
            <img src={data.Poster} alt="Movie"></img>
          </div>
          <div className="column2">
            <h3> Title: {data.Title}</h3>
            <h6>Actors: {data.Actors}</h6>
            <h6>Year: {data.Year}</h6>
            <h6>Runtime: {data.Runtime}</h6>
            <h6>Rated: {data.Rated}</h6>
            <p>Plot: {data.Plot}</p>
          </div>
          <div>{console.log(data.Title +' '+ data.Actors)}</div>
        </div>
        
      );
    }    
  }
}

export default FetchMovie;

import React from 'react';
import './App.css';
import NavBar from './components/NavBar';
import SearchBox from './components/SearchBox';
import FetchMovie from './components/FetchMovie';
function App() {
  return (
    <>
      <NavBar />,
      <SearchBox />
      <FetchMovie />
    </>
  );
}

export default App;

When I write on the input box and click Enter, I get an error with the following message:

"TypeError: this.props.onSearchBox is not a function SearchBox/this.handleSubmit"

Your help is highly appreciated!

Answer 1

There are a few things to correct:

1. You're not passing a prop called onSearchBox when you're using <SearchBox /> in the JSX of the App component.

2. In the FetchMovie component, the URL is wrong since you should place the search string but not the component itself.

something like this:

fetch(`http://www.omdbapi.com/?i=tt3896198&apikey=dfbcc791&t=${enteredString}`

not

fetch(`http://www.omdbapi.com/?i=tt3896198&apikey=dfbcc791&t=${<SearchBox onSearchBox={this.handleSubmit} />}`

3. You should maintain a new state in the App component to handle the state of the entered search string(to pass it to the FetchMovie component) and to check if it is submitted to display the FetchMovie component.