I am working on a simple app using github api to implement a search box which then print out the result of the search. I have been struggling to build the search box (GithubSearch.js) to detect the specific Github features and print it out. Someone should please continue from where I stopped and implement the said feature Thanks.

GithubProfile.js

import React from "react";

class GithubProfile extends React.Component {
  constructor() {
    super();
    this.state = {
      userName: {},
      isLoading: false
    }
  }

  componentDidMount() {
    this.setState({
      isLoading: true
    })
    fetch("https://api.github.com/users/Tunji545")
      .then(response => response.json())
      .then(data => {
        this.setState({
          isLoading: false,
          userName: data
        })
      });
  }

  render() {

    // const results = this.state.isLoading ? "Loading..." : this.state.userName;
    return (
      <div className="github-user">
        <img className="github-user_avatar" src="https://avatars0.githubusercontent.com/u/13945094?v=4" width="200" height="200" alt="Avatar" />
        <div className="github-user_info">
          <p>{this.props.userName}</p>
          <p>{this.props.bio}</p>
        </div>
      </div>
    )
  }
}

export default GithubProfile;

GithubSearch.js

import React from "react";
import GithubProfile from "./GithubProfile";
import Form from "./GithubSearchForm";

class Search extends React.Component {
  constructor() {
    super();
    this.state = {
      userName: {}
    }
  }

  handleSearch(searchTerm) {
    console.log(searchTerm)      // I guess this is where I need help to implement.
  }

  render() {
    return (
      <div>
        <Form onSearch={this.handleSearch} />
        {this.state.userName ? <GithubProfile userName={this.state.userName.name} bio={this.state.userName.bio} /> : null}
      </div>
    )
  }
}

export default Search;

GithubSearchForm.js

import React from "react";

class Form extends React.Component {
  constructor() {
    super();
    this.state = {
      userInput: ""
    }
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  
  handleSubmit(event) {
    event.preventDefault();
    const {name, value} = event.target
    this.setState({
      [name] : value
    })
    this.props.onSearch(this.state.value);
  }

  render() {

    return (
      <form onSubmit={this.handleSubmit} >
        <p>Enter the username:</p>
        <input type="text" name="userInput" value={this.state.value} />     
        <button>GO!</button>
      </form>
    )

  }
}

export default Form;