javascript - Reuse data from API | React -

i'm trying send data api component in react, how should i? tried "props", i'm still newbie , not how pass data components, can see in code in "user.jsx" in <h2> john doe </ h2> want print data comes api "usuario", advice please

api.jsx

import react 'react' import menuprofile './user.jsx'   export default class cliente extends react.component {     constructor() {         super()         this.state = { clientid: '', usuario: '' }     }     componentwillmount() {       fetch('myurl', {         method: 'post',         body: json.stringify({           usuario: 'test',           password: 'test',         })        })       .then((response) => {         return response.json()       })       .then((data) => {         this.setstate({ clientid: data.clientid, usuario: data.usuario })       })     }     render () {         return (           // testing if state prints success           <div classname="container-fluid">             <div>{this.state.usuario}</div>   <---- data (name)           </div>          );       } } 

user.jsx

import react 'react'; import cliente './api.jsx'  export default class menuprofile extends react.component {   render () {     console.log();     return (       <div classname="profile">         <div classname="profile_pic">           <img src="../assets/images/img.jpg" alt="..." classname="img-circle profile_img"></img>         </div>         <div classname="profile_info">           <span>welcome,</span>           <h2>jhon doe</h2>  <---- insert here (from api.jsx)         </div>       </div>        );   } } 

for need call menuprofile under cliente.

import react 'react' import menuprofile './user.jsx'

export default class cliente extends react.component {     constructor() {         super()         this.state = { clientid: '', usuario: '' }     }     componentwillmount() {       fetch('myurl', {         method: 'post',         body: json.stringify({           usuario: 'test',           password: 'test',         })        })       .then((response) => {         return response.json()       })       .then((data) => {         this.setstate({ clientid: data.clientid, usuario: data.usuario })       })     }     render () {         return (           // testing if state prints success           <div classname="container-fluid">             <div>{this.state.usuario}</div>   <---- data (name)             <menuprofile name={this.state.usuario} />           </div>          );       } }   import react 'react'; import cliente './api.jsx'  export default class menuprofile extends react.component {   render () {     cont {name} = this.props     console.log();     return (       <div classname="profile">         <div classname="profile_pic">           <img src="../assets/images/img.jpg" alt="..." classname="img-circle profile_img"></img>         </div>         <div classname="profile_info">           <span>welcome,</span>           <h2>{name}</h2>  <---- insert here (from api.jsx)         </div>       </div>        );   } }