How to resolve React state updating but not pushing values to props? - reactjs

Question

I am fetching data from an API to build a page that will display recipes as a fun little app to add on to my "things I've built" list. I can run the fetch call and see that the state is updated in dev tools, but after adding a ternary operation to render this new data once the search is performed, the new state/data does not seem to pass into my child component props.
I've tried providing default values to the recipes prop
recipes={ this.state.results || {"id": 1, title: "test", "servings": "6", "readyInMinutes": 10}}
and I've tried setting isLoading in the callback of my setState call
this.setState({ results: resData.data.results},
() => { this.setState({isLoading: false});} )
I've been all over stack overflow and other resources trying just about anything i can find...I understand the setState is asynchronous and I've tried playing around with every solution I can find on google rephrasing this question over and over, and at this point I assume its some precise problem that I am just not noticing.
Main Component:
class CookingPage extends Component {
state = {
results: [],
isLoading: true,
}
isActive = true;
constructor(props) {
super(props);
}
// componentDidMount(){
// this.setState({
// isLoading: false
// });
// }
srchApi = e => {
e.preventDefault();
let validated = false;
let query = document.getElementById('search').value;
let cuisine = document.getElementById('cuisine').value;
let diet = document.getElementById('diet').value;
if(query){
validated = true;
}
if (!validated) {
//code to notify user of invalid search
return;
} else {
fetch('http://localhost/cooking', {
method: 'post',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
query: query,
cuisine: cuisine,
diet: diet
})
}).then(res => {
return res.json();
}).then(resData => {
if(this.isActive){
debugger;
this.setState({
results: resData.data.results,
isLoading: false
});
}
}).catch(err => {
if(this.isActive){
this.setState({isLoading: false});
}
});
}
}
componentWillUnmount() {
this.isActive = false;
}
render() {
return (
<div className='background'>
<div className="container">
<div className="row">
<div className="col-12">
<div className='container search-ctr'>
<Form>
<div className='row'>
<div className='col-4 plain-search'>
<Form.Group controlId='search'>
<Form.Label>Plain Search</Form.Label>
<Form.Control type='text' placeholder='Recipes...Nutrients...Ingredients...Just search!'></Form.Control>
</Form.Group>
</div>
<div className='col-4 col-cuisine'>
<Form.Group controlId='cuisine'>
<Form.Label>Cuisine</Form.Label>
<Form.Control type='text' placeholder='Italian, Mexican, etc..'></Form.Control>
</Form.Group>
</div>
<div className='col-4 col-diet'>
<Form.Group controlId='diet'>
<Form.Label>Diet</Form.Label>
<Form.Control type='text' placeholder='Vegetarian, Vegan, etc...'></Form.Control>
</Form.Group>
</div>
</div>
<div className='row'>
<div className='col-12'>
<button type="submit" className="btn btn-outline-light btnSearch" onClick={this.srchApi}>Search</button>
</div>
</div>
</Form>
</div>
</div>
</div>
<div className='row'>
<div className='col-12'>
{this.state.isLoading ? (<div></div>) :
<RecipeList
recipes={this.state.results}
onDetail={this.showDetailsHandler}
/>
}
</div>
</div>
</div>
</div>
);
}
}
export default CookingPage;
Child component:
const RecipeList = props => {
const mapRecipes = props.recipes.map(recipe => {
return(
<PreviewRecipe
key = {recipe.id}
className = "preview-recipe"
recipekey = {recipe.id}
recipeid = {recipe.id}
title = {recipe.title}
cookTime = {recipe.readyInMinutes}
servings = {recipe.servings}
onDetail = {props.onViewDetail}
/>
)
});
return (
<React.Fragment>
<div className = "recipe-list-ctr">
<h4 className = "recipe-list-title">Title</h4>
<h4 className = "recipe-list-servings">Servings</h4>
<h4 className = "recipe-list-img">Image</h4>
</div>
{mapRecipes}
</React.Fragment>
)
};
export default RecipeList;
I expect a list of RecipeList components to display on the page after being mapped from the props, however I get the error:
"TypeError: Cannot read property 'map' of undefined.
As I explained before, using dev tools and removing the isLoading:false from the setState call, I can see in dev tools that the state is updating to the data received from the API, so I am really unsure as to why it is not being passed through. My understanding of the life-cycle just might not be up to par yet, and I would appreciate and solutions or suggestions to help me debug and get back on the right track.

Answer 1

I've figured out the issue I believe. After days and hours of debugging, the issue came to be that my import statement for one of my components was importing from the wrong file. Thus it was rendering a component with props that were undefined.