Unable to pass props from parent to child and save it in state of child component

I'm trying to develop a website for fetching GitHub data, but I'm having problem in updating the component that shows data Formdata component. It doesn't seem to be updating form some reasons.

App:

export default class App extends Component {  constructor(props){    super(props);    this.state = {      uname:'',      udata:'',    };    this.handleInput = this.handleInput.bind(this);    this.getUser = this.getUser.bind(this);  }    getUser(){    fetch(`https://api.github.com/users/${this.state.uname}`)      .then(response => response.json())      .then(data =>  this.setState({udata:data}))      .catch(error => console.error(error));  }    handleInput(event){        this.setState({          uname:event.target.value        });  }  render() {    return (      <div>        <Header></Header>        <Form handleInput={this.handleInput} uname={this.state.uname} getUser={this.getUser}></Form>        <Formdata udata={this.state.udata}></Formdata>      </div>    )  }  }  

Form:

export default function Form(props) {       const {getUser, handleInput, uname} = props;      return (          <div className="form">              <input className="textbar" placeholder="Search for username" value={uname} onChange={handleInput} name="uname"></input>              <button className="button" onClick={getUser} >Search</button>          </div>      )  }  

Formdata:

export default class Formdata extends Component {            constructor(props){          super(props);          this.state = {              follower:'',              following:'',              public_repos:'',              visit_page:'',              avatar:''          }          this.updateUser = this.updateUser.bind(this);      };      componentDidMount(props){         this.updateUser();      }            updateUser(){          this.setState({follower:this.props.udata.followers});          this.setState({following:this.props.udata.following});          this.setState({public_repos:this.props.udata.public_repos});          this.setState({visit_page:this.props.udata.url});          this.setState({avatar:this.props.udata.avatar_url});          console.log(this.props.udata);        }      render() {             return (              <div>                  <img className="imge" src= {this.state.avatar} alt="  "></img>                  <div className="details">                      <div className="compon">Followers: {this.state.followers}</div>                      <div className="compon">Following: {this.state.following}</div>                      <div className="compon">public repos" {this.state.public_repos}</div>                  </div>                  <div className="urls">Page:{this.state.visit_page}</div>                </div>          )      }  }  

I can't figure out how to update component Formdata on clicking search button in Form component.

https://stackoverflow.com/questions/66507203/unable-to-pass-props-from-parent-to-child-and-save-it-in-state-of-child-componen March 06, 2021 at 11:13PM