Reuse data from API | React

Question

I'm trying to send the data I get from the API to another component in REACT, how should I? i tried the "props", but I'm still a newbie and do not get how to pass the data to another components, as you can see in the code in "user.jsx" in the <h2> John Doe </ h2> i want to print the data that comes from api "usuario", any advice please

api.jsx

import React from 'react'
import MenuProfile from './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 the state prints with success
          <div className="container-fluid">
            <div>{this.state.usuario}</div>   <---- this data (name)
          </div>
         );
      }
}

user.jsx

import React from 'react';
import Cliente from './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>
       );
  }
}

Answer 1

For that you would need to call your MenuProfile under Cliente .

import React from 'react' import MenuProfile from './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 the state prints with success
          <div className="container-fluid">
            <div>{this.state.usuario}</div>   <---- this data (name)
            <MenuProfile name={this.state.usuario} />
          </div>
         );
      }
}


import React from 'react';
import Cliente from './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>
       );
  }
}