How can I export a variable to another file React - reactjs

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;

Answer 1

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>
);
}
}