trjhtr

I want to be able to share one single modal component for add and update for a list. I think now my code for the modal is fine, it's stateless:

const MyModal = (
 isOpen,
 closeModal,
 handleChangeDrinkInput,
 newDrink,
 saveModal,
 isEdit
) => (
 <Modal isOpen=isOpen onRequestClose=closeModal contentLabel="Modal">
 isEdit ? "Edit drink" : "Add drink"
 <br />
 <input type="text" onChange=handleChangeDrinkInput value=newDrink />
 <br />
 <br />
 <button onClick=() => saveModal(isEdit)>Save</button>
 </Modal>
);

export default MyModal;

It has placeholder including event functions coming as props, but I doubt my container is ok, how can I improve the container which is index.js?

https://codesandbox.io/s/l50wrqjmz

For now I'm passing in a flag telling the Modal whether I'm doing add or edit.

saveModal=isEdit => 

 if (isEdit) 
 this.setState(
 drinks: this.state.drinks.map(o => 
 console.log(this.state.newDrink)
 if (o === this.state.oldDrink) 
 return this.state.newDrink;
 
 return o;
 ),
 modalIsOpen: false,
 newDrink: ""
 );
 else 
 this.setState(
 drinks: [...this.state.drinks, this.state.newDrink],
 modalIsOpen: false,
 newDrink: ""
 );
 

The problem I see might arise is that if the modal is not simple it might have some more logic, it make the flow not readable.

Full code or demo is here https://codesandbox.io/s/l50wrqjmz