[Solved]-React : how to get input value from one component to make the ajax call in another component?-Reactjs

componentDidMount get called only once when your component get attached to the page. So it's not the correct place to call you search API. Instead, you should call it every time when the user clicks 'submit' button. For that, you need to bubble handleSubmit trigger to App component by passing a callback method as a prop to SearchForm component. Also, you don't need to use ref as you already have search text in your state.

SearchForm

class SearchForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }


  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    event.preventDefault();
    if(this.props.onSubmit && typeof this.props.onSubmit === "function"){
      this.props.onSubmit(this.state.value);
    }
  }


  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input className="movieName" type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
        <h1>{this.state.value}</h1>
      </form>
    );
  }
}

App

class App extends React.Component {  /* I'm not sure why you extends NameForm and what NameForm does */
  constructor(props) {
    super(props);
    this.state = {
      movie:[]
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(value) {
    let searchInput = value // you get the value of movieName input here

    let sortByPop = "&sort_by=popularity.desc";
    let requestUrl = 'https://api.themoviedb.org/3/search/movie?api_key=f8c4016803faf5e7f424abe98a04b8d9&query=' + searchInput + sortByPop;

    axios.get(requestUrl).then(response => {
        this.setState({movie: response.data.results})
    });
  }

  render() {

    let baseImgURL = "https://image.tmdb.org/t/p/w185_and_h278_bestv2";
    let posterImgPath = this.state.movie.map(movie => movie.poster_path);
    let posterLink = baseImgURL + posterImgPath;
    // I'm not sure why use need above code as you don't use it anywhere

    return(
      <div className="App">
        <Header />
        <SearchForm onSubmit={this.handleSubmit}/>   
      <div> 
        {this.state.movie.map(movie =>
         <div className="movieTitle">
         <div className="movieCard">
         <img className="posterImg" src= {`https://image.tmdb.org/t/p/w185_and_h278_bestv2/${movie.poster_path}`} alt={movie.title} />
         <div className="searchFilmTitles" key={movie.id}>{movie.title}</div>
         </div>
         </div>
         )} 
      </div>
     </div>
    );
  }

}