Как передать состояние React вложенному компоненту в другой компонент

Question

У меня есть пользовательский компонент, который создает API для получения информации, а затем сохраняет ее в состоянии. Проблема в том, что я не могу понять, как передать состояние другому компоненту внутри этого компонента <FormInputs>

Итак, после вызова мне нужны параметры из state: users[], чтобы иметь возможность отображаться в свойство defaultValue в дочернем компоненте. Как мне это сделать? Я пробовал много разных способов, но всегда "undefined".

Я тоже пробовал: defaultValue: `${users.email} Без кости. Тоже пробовал this.props.users.email Без кости. Заранее благодарим за возможную подсказку!

import axios from 'axios';

import {
  Grid,
  Row,
  Col,
  FormGroup,
  ControlLabel,
  FormControl
} from "react-bootstrap";

import { Card } from "components/Card/Card.jsx";
import { FormInputs } from "components/FormInputs/FormInputs.jsx";
import { UserCard } from "components/UserCard/UserCard.jsx";
import Button from "components/CustomButton/CustomButton.jsx";

import avatar from "assets/img/faces/face-3.jpg";

class UserProfile extends Component {

  constructor(props) {
    super(props);
 
    this.state = {
      users: []
    };
  }

  componentDidMount() {
    axios.get('https://niftyAPIurlDataCall/AlltheThings')
    .then(response => {
      console.log(response.data);
      const users = response.data;
      this.setState({ users });
    })
    .catch(error => {
      console.log(error);
    });
  }

  render() {

    return (
      <div className="content">
        <Grid fluid>
          <Row>
            <Col md={8}>
              <Card
                title="Edit Profile"
                content={
                  <form>
                    <FormInputs
                      ncols={["col-md-5", "col-md-3", "col-md-4"]}
                      properties={[
                        {
                          label: "Lab (disabled)",
                          type: "text",
                          bsClass: "form-control",
                          placeholder: "Lab",
                          defaultValue: "account",
                          disabled: true
                        },
                        {
                          label: "ID",
                          type: "text",
                          bsClass: "form-control",
                          placeholder: "ID",
                          defaultValue: users.id
                        },
                        {
                          label: "Email address",
                          type: "email",
                          bsClass: "form-control",
                          placeholder: "Email",
                          defaultValue: `${users.email}`
                        }
                      ]}
                    />
                    <FormInputs
                      ncols={["col-md-6", "col-md-6"]}
                      properties={[
                        {
                          label: "First name",
                          type: "text",
                          bsClass: "form-control",
                          placeholder: "First name",
                          defaultValue: `${users.first_name}`
                        },
                        {
                          label: "Last name",
                          type: "text",
                          bsClass: "form-control",
                          placeholder: "Last name",
                          defaultValue: `${users.last_name}`
                        },
                        {
                          label: "User ID",
                          type: "text",
                          bsClass: "form-control",
                          placeholder: "Last name",
                          defaultValue: `${users.user_id}`
                        }
                      ]}
                    />
                    <FormInputs
                      ncols={["col-md-12"]}
                      properties={[
                        {
                          label: "Group",
                          type: "text",
                          bsClass: "form-control",
                          placeholder: "Group",
                          defaultValue: `${users.group}`
                        },
                        {
                          label: "Group ID",
                          type: "text",
                          bsClass: "form-control",
                          placeholder: "Group ID",
                          defaultValue: `${users.group_id}`
                        },
                        ,
                        {
                          label: "Join date",
                          type: "text",
                          bsClass: "form-control",
                          placeholder: "Join date",
                          defaultValue: `${users.join_date}`
                        }
                      ]}
                    />
                    <Button bsStyle="info" pullRight fill type="submit">
                      Update Profile
                    </Button>
                    <div className="clearfix" />
                  </form>
                }
              />
            </Col>
          </Row>
        </Grid>
      </div>
    );
  }
}

export default UserProfile;