How can I export a variable to another file React

Question

I am doing a program which gets information from the https://api.randomuser.me/ API. I got the fetch call working but my goal is to display the information as prefilled information in a form located in another file, but I don't know how I should export the variables and how to use them in the other file.

This is my FetchCall.js:

import Axios from 'axios'
import { useState } from 'react';



function FetchCall() {
  
  const[name,setName] = useState("")
  const[birth,setBirth] = useState("")
  const[email,setEmail] = useState("")
  const[insuranceNo, setInsuranceNo] = useState("")
  const[phoneNo, setPhoneNo] = useState("")

  const getInfo = () => {
  Axios.get("https://api.randomuser.me/").then(
    (response) => {
      setName(response.data.results[0].name.first + " " + response.data.results[0].name.last);
      setBirth(response.data.results[0].dob.date);
      setEmail(response.data.results[0].email)
      setInsuranceNo(response.data.results[0].login.sha1)
      setPhoneNo(response.data.results[0].phone)

    }
  );
};

  return(
    <div>
      Hello 
      <button onClick={getInfo}>Get User</button>
      <div>
        {name}
      </div>
      <div>
        {birth}
      </div>
      <div>
        {email}
      </div>
      <div>
        {insuranceNo}
      </div>
      <div>
        {phoneNo}
      </div>
    </div>
  );
}

export default FetchCall;

And here is where I want to export the variables (name, birth,email, insuranceNo,phoneNo)

import FetchCall from './fetchCall';

function InputTextFilled() {
  return (
    <div className="inputText has-text-left">
      <fieldset disabled>
        <div className="field">

          <div className="control">
            <p className="label">Full Name</p>
            <input className="input" type="text" value="VARIABLEHERE" />
          </div>

          <div className="control mt-5">
            <a className="label">Date of Birth</a>
            <input className="input" type="text" value="VARIABLEHERE" />
          </div>

          <div className="control mt-5">
            <p className="label">National Insurance Number</p>
            <input className="input" type="text" value="VARIABLEHERE" />
          </div>

          <div className="control mt-5">
            <p className="label">Email Address</p>
            <input className="input" type="text" value="VARIABLEHERE" />
          </div>

          <div className="control mt-5">
            <p className="label">Telephone Number</p>
            <input className="input" type="text" value="VARIABLEHERE" />
          </div>

        </div>
      </fieldset>
    </div>
  );
}

export default InputTextFilled;

I think you're missing one of the most fundamental ways to manage data in React, [props](https://reactjs.org/docs/components-and-props.html). You need to fetch your data higher up in your component tree and pass it down as props to the components that need it. There are other ways to manage state, such as Redux or the Context API, but that is more advanced and you should really read the documentation to understand how use props and compose components first. — Chris B., Nov 08 '20 at 00:18

Ehsan Gondal · Accepted Answer · 2020-11-08T15:26:39.287

React Props are like function arguments in JavaScript and attributes in HTML. To send props into a component, use the same syntax as HTML attributes.

import Axios from "axios";
import { useState } from "react";
function FetchCall() {
  const [name, setName] = useState("");
  const [birth, setBirth] = useState("");
  const [email, setEmail] = useState("");
  const [insuranceNo, setInsuranceNo] = useState("");
  const [phoneNo, setPhoneNo] = useState("");

  const getInfo = () => {
    Axios.get("https://api.randomuser.me/").then((response) => {
      setName(
        response.data.results[0].name.first +
          " " +
          response.data.results[0].name.last
      );
      setBirth(response.data.results[0].dob.date);
      setEmail(response.data.results[0].email);
      setInsuranceNo(response.data.results[0].login.sha1);
      setPhoneNo(response.data.results[0].phone);
    });
  };

  return (
    <div>
      Hello
      <button onClick={getInfo}>Get User</button>
      <div>{name}</div>
      <div>{birth}</div>
      <div>{email}</div>
      <div>{insuranceNo}</div>
      <div>{phoneNo}</div>
      {/* //This is the child compoennt */}
      <DisplayExample1
        name={name}
        birth={birth}
        email={email}
        insuranceNo={insuranceNo}
        phoneNo={phoneNo}
      />
      <DisplayExample2
        name={name}
        birth={birth}
        email={email}
        insuranceNo={insuranceNo}
        phoneNo={phoneNo}
      />
    </div>
  );
}

export default FetchCall;

In a functional stateless component, the props are received in the function signature as arguments:

//Child Component Example 1

const DisplayExample1 = ({ name, birth, insuranceNo, phoneNo }) => (
  <div className="inputText has-text-left">
    <fieldset disabled>
      <div className="field">
        <div className="control">
          <p className="label">Full Name</p>
          <input className="input" type="text" value={name} />
        </div>

        <div className="control mt-5">
          <a className="label">Date of Birth</a>
          <input className="input" type="text" value={birth} />
        </div>

        <div className="control mt-5">
          <p className="label">National Insurance Number</p>
          <input className="input" type="text" value={insuranceNo} />
        </div>

        <div className="control mt-5">
          <p className="label">Email Address</p>
          <input className="input" type="text" value={email} />
        </div>

        <div className="control mt-5">
          <p className="label">Telephone Number</p>
          <input className="input" type="text" value={phoneNo} />
        </div>
      </div>
    </fieldset>
  </div>
);

React's props can pass data in React by defining custom HTML attributes to which you assign your data with JSX syntax. So don't forget the curly braces. //Child Component Example 2 (Class Component)

class DisplayExample2 extends Component {
  render() {
    return (
      <div className="inputText has-text-left">
        <fieldset disabled>
          <div className="field">
            <div className="control">
              <p className="label">Full Name</p>
              <input className="input" type="text" value={this.props.name} />
            </div>

            <div className="control mt-5">
              <a className="label">Date of Birth</a>
              <input className="input" type="text" value={this.props.birth} />
            </div>

            <div className="control mt-5">
              <p className="label">National Insurance Number</p>
              <input
                className="input"
                type="text"
                value={this.props.insuranceNo}
              />
            </div>

            <div className="control mt-5">
              <p className="label">Email Address</p>
              <input className="input" type="text" value={this.props.email} />
            </div>

            <div className="control mt-5">
              <p className="label">Telephone Number</p>
              <input className="input" type="text" value={this.props.phoneNo} />
            </div>
          </div>
        </fieldset>
      </div>
    );
  }
}

How can I export a variable to another file React

1 Answers1

Linked