Hello everyone
I get stuck in how to edit my recipe in a statefull component named modaForm where I am using its state to rise up the recipe infos to the parent state and then render them .
now the problem is that when I want to edit a recipe I should get every info about that recipe
here I get stuck I could get the infos of the recipe I want to change from the parent state in index component but I can not change the state of modalForm because modalForm state is empty so I can not rise up again the whole infos .modalForm is empty because every key value is changed by onHandleChange .
I hope I explain my issue clearly .
here is it
I am not sure what you may have changed in the app, but as of the time of this post, CDM shows this
componentDidMount = () => {
const stringRecipe = localStorage.getItem("recipe");
if (stringRecipe !== undefined) {
const recipe = JSON.parse(stringRecipe);
this.setState({ recipe });
}
};
and your app is broken on load, the problem is that an empty local storage does not return undefined but rather it returns null, so you can change the conditional to
if (stringRecipe !== null)
or just simply
if (stringRecipe)
I know this does not answer your question directly but that is why the app is broken on first load
Point 2, WRT your original question, you are calling modal form aka header by ref, why ? Anyway in this function below:
onHandleEditRecipe = IndexFedit => {
if (IndexFedit !== -1) {
this.setState({ IndexFedit });
console.log(this.state.recipe[IndexFedit])
this.refs.header.openModal();
this.refs.header.changeShowSaveBtn();
}
};
it seems that you are sending the correct index for the recipe and you can see it is available, you can make changes and reset the state on save, see here how to change state without mutating it
http://forum.freecodecamp.org/t/reactjs-using-setstate-to-update-a-single-property-on-an-object/
I encourage you to remove the by refs reference as I don’t see why you need it in this particular case : https://reactjs.org/docs/refs-and-the-dom.html#dont-overuse-refs
Thanks for everything I apperciate your help , I called header with refs
onHandleEditRecipe = IndexFedit => {
if (IndexFedit !== -1) {
this.setState({ IndexFedit });
this.refs.header.openModal();
this.refs.header.changeShowSaveBtn();
}
};
because openModal is in Header component wich is a child of the App component
I didn’t find a way to call this function from the parent , when I call this function the modal gets opened .
As you said I get the correct index for the recipe but if you noticed in modalForm component
I have another state with its informations I can add the recipe when I click on submit ,
the problem is that the recipe I get when I click edit is comming from App component
so the state of modalForm is still empty so that I can not edit anything because those infos I get are not from handlechange wich is in modalForm .
any help you give me is apperciated .
@mustaphason Your component infrastructure is very convoluted, but I remember when I was new to react and working on this project how confusing it was, so I understand, there are several changes you would need to make to make it work with the current structure you have:
First in modalform.js you need to set the state of the modified recipe on an edit mount, the only way to do this, because of the way you have it set up, is through CDU
componentDidUpdate(prevProps) {
const { showSaveBtn } = this.props.state;
if (!prevProps.state.showSaveBtn && showSaveBtn) {
const { recipe, IndexFedit } = this.props.forEditState;
const currentState = JSON.parse(JSON.stringify(recipe[IndexFedit]));
this.setState(currentState);
}
}
then onHandleSubmit you have to conditionally find if it is a modification submit and if it is run the call back to index
onHandleSubmit = e => {
e.preventDefault();
const { showSaveBtn } = this.props.state;
if (this.state.recipeName && !showSaveBtn) {
this.props.onAddRecipe(this.state);
this.props.closeModal();
if (this.props.state.showSaveBtn) {
this.props.changeShowSaveBtn();
}
this.setState({ recipeName: "", ingredients: "", directions: "" });
}
if (showSaveBtn) {
this.props.onModifyRecipe(this.state);
}
};
Then in index.js you have to handle the edit callback
onModifyRecipe = modified => {
const stateCopy = JSON.parse(JSON.stringify(this.state));
const indexOfRecipe = stateCopy.recipe.findIndex(
r => r.recipeName === modified.recipeName
);
stateCopy.recipe[indexOfRecipe] = modified;
this.setState(stateCopy);
};
and set your props in the render of index and header components accordingly
<Header
onAddRecipe={this.onAddRecipe}
onModifyRecipe={this.onModifyRecipe}
ref="header"
forEditState={this.state}
/>
header.js
<ReactModal
state={this.state}
closeModal={this.closeModal}
onAddRecipe={this.props.onAddRecipe}
onModifyRecipe={this.props.onModifyRecipe}
changeShowSaveBtn={this.changeShowSaveBtn}
forEditState={this.props.forEditState}
/>
I would encourage you again to read what I wrote above about refs and also think of ways to simplify your app, the app looks good but the component structure is convoluted and would get worse as it grows, you can simplify it in many ways.
here is a version of your app where you can edit the recipes: https://codesandbox.io/s/recipe-box-e04fn
Thank you , yeah my app is a little convoluted it can be structured better that that ,but before your last answer I found a way out to edit the recipe and now my app works correctly ,
I wanted to change it from scratch but it was a litte bit challenging .