Passing a state value in functional component in React - reactjs

Question

I am trying to use promise tracker. I used react-promise-tracker package.
Below the code of my component:
import React from "react";
import { usePromiseTracker } from "react-promise-tracker";
import Spinner from "./Spinner";
const LdngIndicator = (props) => {
const { promiseInProgress } = usePromiseTracker();
return promiseInProgress && <Spinner />;
};
export default function LoadingIndicator() {
return <LdngIndicator />;
}
parent.js
import React, { Component } from "react";
import { trackPromise } from "react-promise-tracker";
import LoadingIndicator from "./LoadingIndicator";
export default class App extends Component {
constructor() {
super();
this.state = {
randomResponse: "",
};
}
apifunc = () => {
trackPromise(
fetch(
"https://****.rapidapi.com/random",
{
method: "GET",
headers: {
accept: "application/json",
"x-rapidapi-key": process.env.REACT_APP_KEY,
"x-rapidapi-host": "host.rapidapi.com",
},
}
)
.then((res) => res.json())
.then((res) => {
this.setState({
randomResponse: res,
});
})
.catch((err) => {
console.error(err);
})
);
};
handleSubmit = (e) => {
e.preventDefault();
this.apifunc();
};
render() {
return (
<div className="wrapper">
<form className="jokesForm" onSubmit={this.handleSubmit}>
<label>Get a new joke</label>
<input type="submit" value="Go!"></input>
</form>
<main>
{<LoadingIndicator /> ? <p>True</p> : <p>false</p>}
</main>
</div>
);
}
}
I can run this without any issues. I would like to get boolean value of the promiseInProgress in my parent component.
promiseInProgress changes as I make requests.
What is the best way to send this as props?
I read https://reactjs.org/docs/components-and-props.html as well as different questions on stack overflow but I was not able to find an answer to my quesiton.
I appreciate any help.

Answer 1

you didn't show us your parent component though so let's assume its a functional component
//parent.jsx
import react, { useState } from 'react'
import Loader from 'loader.jsx'
const ParentComp = () => {
const [state, setState] = useState(false)
return <>
<Loader setState={setState} setState={setState} />
<span> {`state: ${state}`} <span/>
</>
}
export default ParentComp
//loader.jsx
import React from "react";
import { usePromiseTracker } from "react-promise-tracker";
import Spinner from "./Spinner";
const LdngIndicator = () => {
const { promiseInProgress } = usePromiseTracker();
return promiseInProgress && <Spinner />;
};
export default function LoadingIndicator({state, setState}) {
return <>
<button onClick={() => setState(!state)}>click</button>
<LdngIndicator />
</>
}
you get the idea? what you can easily do is to pass setState to child component and modify it from the child