ReactJs how to get specific props data in child component

Question

I get API data in DownloadsHistory.jsx and passed props in the child components like below code:

<DownloadData
      downloadToday={d.today}// need that separatly
      downloadYesterday={d.yesterday}
      downloadLastWeek={d.last_week}
      downloadAllTime={d.all_time}
    />

If I console in DownloadData.jsx get below data:

{downloadToday: "55628", downloadYesterday: "98569", downloadLastWeek: "720570", downloadAllTime: "143086901"}

I get all the props data if I called <DownloadHistory/> . that's fine but how can I get single data from it? Suppose I want only {this.props.downloadToday}. on a third.jsx

Add more details code below:

DownloadHistory.jsx

import React, { Component } from "react";
import axios from "./axios";
import DownloadData from "./download-view";

class DownloadsHistory extends Component {
  state = {
    data: [],
  };

  componentDidMount() {
    var slug = "contact-form";
    const url =
      "https://api.xyz.com/downloads.php?slug=" +
      slug +
      "&limit=10&historical_summary=1";

    axios.get(url).then((res) => {
      this.setState({ data: res.data });
    });
  }

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    var d = this.state.data;
    if (!d) return <div className="loading"></div>;

    return (
      <div>
        <DownloadData
          downloadToday={d.today}
          downloadYesterday={d.yesterday}
          downloadLastWeek={d.last_week}
          downloadAllTime={d.all_time}
        />
      </div>
    );
  }
}
export default DownloadsHistory;

download-view.jsx

import React, { Component, Fragment } from "react";

class DownloadData extends Component {
  render() {
    console.log(this.props);
    return (
      <Fragment>
        <table className="table" style={{ fontSize: 13, textAlign: "left" }}>
          <tbody>
            <tr>
              <td>Today</td>
              <td>{this.props.downloadToday}</td>
            </tr>
            <tr>
              <td>Yesterday</td>
              <td>{this.props.downloadYesterday}</td>
            </tr>
            <tr>
              <td>Last Week</td>
              <td>{this.props.downloadLastWeek}</td>
            </tr>
            <tr>
              <th>All Time</th>
              <th>{this.props.downloadAllTime}</th>
            </tr>
          </tbody>
        </table>
      </Fragment>
    );
  }
}
export default DownloadData;

widget.jsx

import React, { Fragment, Component } from "react";
import { faStar, faCheck } from "@fortawesome/free-solid-svg-icons";

import DownloadsHistory from "./DownloadsHistory";
import ActiveVersion from "./active-version";
import Downloads from "./download";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

class Widget extends Component {
  render() {
    console.log(this.props);
    return (
      <Fragment>
        <div className="row mt-5">
          <div className="col-lg-3 col-md-3">
            <div className="widget text-center">
              <div className="widget-heading clearfix">
                <div className="pull-left">Download Today</div>
              </div>
              <div className="widget-body clearfix pt-0">
                <div className="pull-left">
                  <FontAwesomeIcon icon={faCheck} color="#28a745" />
                </div>
                <div className="pull-right number">
                  <DownloadsHistory /> {/* Need only Today Data here*/}
                </div>
              </div>
            </div>
          </div>
          <div className="col-lg-3 col-md-3">
            <div className="widget text-center">
              <div className="widget-heading clearfix">
                <div className="pull-left">Download History</div>
              </div>
              <div className="widget-body clearfix pt-0">
                <DownloadsHistory /> {/* okay here */}
              </div>
            </div>
          </div>
          <div className="col-lg-3 col-md-3">
            <div className="widget text-center">
              <div className="widget-heading clearfix">
                <div className="pull-left">Active Install</div>
              </div>
              <div className="widget-body clearfix pt-0">
                <div className="pull-left">
                  <FontAwesomeIcon icon={faCheck} color="#28a745" />
                </div>
                <div className="pull-right number">
                  {this.props.active_installs}+
                  <div style={{ fontSize: 13 }}>
                    but less than {this.props.probable_active_install}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="col-lg-3 col-md-3">
            <div className="widget text-center">
              <div className="widget-heading clearfix">
                <div className="pull-left">Average Ratings</div>
              </div>
              <div className="widget-body clearfix">
                <div className="pull-left">
                  <FontAwesomeIcon icon={faStar} color="#28a745" />
                </div>
                <div className="pull-right number">{this.props.AvgRating}</div>

                <div style={{ fontSize: 13 }}>
                  based on {this.props.number_of_rating} reviews
                </div>
              </div>
            </div>
          </div>
          <div className="col-lg-3 col-md-3">
            <div className="widget text-center">
              <div className="widget-heading clearfix">
                <div className="pull-left">Download History</div>
              </div>
              <div className="widget-body clearfix pt-0">
                <DownloadsHistory />
              </div>
            </div>
          </div>
          <div className="col-lg-6 col-md-6">
            <div className=" text-center">
              <div className="clearfix">
                <div className="pull-left">Active version</div>
              </div>
              <div className="clearfix pt-0">
                <ActiveVersion />
              </div>
            </div>
          </div>
        </div>
      </Fragment>
    );
  }
}
export default Widget;

** widget.jsx has some props from another parent.

Answer 1

Form your description I'm assuming that the DownloadData component is being rendered inside the DownloadHistory component. If it's the case, then you can simply place the Third component along with the DownloadData component and pass the downloadToday={d.today} only into the Third component.

Like this:

<DownloadData
          downloadToday={d.today}// need that separatly
          downloadYesterday={d.yesterday}
          downloadLastWeek={d.last_week}
          downloadAllTime={d.all_time}
        />

<Third downloadToday={d.today} />

Hope this will help.

Answer 2

You need to call the web service from the parent of both and pass the props to components.