I am currently showcasing the attributes (recipe title, image URL) of items from a state. These items originate from mongodb. Below is my current code flow:
- Create an empty array state variable named
initialRecipesusingconst [initialRecipes, setRecipes] = useState([]); - Retrieve the recipes from the database and add each object to the state array through
setRecipes([...initialRecipes, response.data.message[i]]) - Display the recipes on the page by utilizing
return()and iterating over theinitialRecipesvariable with the.mapfunction - Add a new recipe to the state variable upon form submission and automatically display the newly added recipe on the page - This is my current challenge
Recipes.js
import React, { useState, useEffect } from 'react';
// code snippet
const Recipes = () => {
const [formFieldValue, setFormFieldValues] = useState({
recipe_name: '',
image_url: '',
buttonText: 'Submit'
});
const {recipe_name, image_url, buttonText} = formFieldValue;
const [initialRecipes, setRecipes] = useState([]);
useEffect(() => {
loadAllRecipes();
}, []);
const loadAllRecipes = () => {
axios({
method: 'GET',
url: `${process.env.REACT_APP_API}/recipe`,
})
.then(response => {
for (let i=0; i<response.data.message.length; i++) {
// save each object to state array
setRecipes([
...initialRecipes,
response.data.message[i]
])
}
})
.catch(error => {
// code snippet
});
};
// store changes in form inputs to state
const handleChange = (name) => (event) => {
setFormFieldValues({...formFieldValue, [name]: event.target.value});
};
// form fields snippet
const addRecipeForm = () => (
<form>
<div className="form-group">
<label className="text-muted">Recipe name</label>
<input type="text" className="form-control recipe-form-input" value={recipe_name} onChange={handleChange('recipe_name')} />
</div>
<div className="form-group">
<label className="text-muted">Image URL</label>
<input type="text" className="form-control recipe-form-input" value={image_url} onChange={handleChange('image_url')} />
</div>
<div>
<button className="btn btn-primary btn-submit" onClick={handleSubmit}>Submit</button>
</div>
</form>
);
// add new recipe through form
const handleSubmit = event => {
event.preventDefault();
axios({
method: 'POST',
url: `${process.env.REACT_APP_API}/recipe`
})
.then(response => {
console.log('Recipe saved successfully!', response);
})
.catch(error => {
// console.log(error.response.data.error);
});
};
// display add recipe form and iterate through all recipes
return (
<Layout>
<div className="row">
{addRecipeForm()}
</div>
<div className="row">
<h2 className="title text-center">List of Recipes</h2>
<div className="all-recipes-list ">
{
initialRecipes.map((recipe, index) => {
return (
<div key={index} className="wrapper">
<img className="image" src={recipe.image_url} />
<a className="link" href="#">
<h4 className="title">{recipe.recipe_name}</h4>
</a>
</div>
);
})
}
</div>
</Layout>
);
};
export default Recipes;
Issue: How can I display the newly added Recipe via the API(saved in MongoDB) endpoint within the
<div className="all-recipes-list"></div>Any assistance would be greatly appreciated. Thank you!