Блог

 import axios from 'axios';  function AddRecipes() {  const [state, setstate] = useState({  label: '',  source: '',  dietlabels: [],  healthlabels: [],  cuisineType: [],  ingredients: [],  mealType: [],  makingDescription: '',  recipeImage: null  });  const onFormSubmit = async (e) =gt; {  e.preventDefault();  console.log(state.ingredients);  try {  const fd = new FormData();  fd.append('recipeImage', state.recipeImage, state.recipeImage.name);  fd.append('label', state.label);  fd.append('source', state.source);  fd.append('dietlabels', JSON.stringify(state.dietlabels));  fd.append('healthlabels', JSON.stringify(state.healthlabels));  fd.append('ingredients', JSON.stringify(state.ingredients));  fd.append('cuisineType', JSON.stringify(state.cuisineType));  fd.append('mealType', JSON.stringify(state.mealType));  fd.append('makingDescription', state.makingDescription);  // console.log(fd)  const { data: response } = await axios.post('http://localhost:8000/recipe', fd);  console.log('api response'   response);  } catch (error) {  console.log(error);  }  };  const [arrayState, arraySetSate] = useState({  dietlabels: '',  healthlabels: '',  cuisineType: '',  ingredients: { text: '', weight: '' },  mealType: ''  });  const subIngredientStatePush = (event) =gt; {  let replica = { ...arrayState };  replica.ingredients[event.target.name] = event.target.value;  arraySetSate(replica);  };  //string type field data handling  const stringTypeFieldDataHandler = (event) =gt; {  let replicateState = { ...state };  replicateState[event.target.name] = event.target.value;  setstate(replicateState);  };  //image file handling  const imageUploadFileHandler = (event) =gt; {  let replicateState = { ...state };  replicateState['recipeImage'] = event.target.files[0];  setstate(replicateState);  };  //array elements data handling  const arrayElementSeparateStateHandler = (event) =gt; {  let repilica = { ...arrayState };  repilica[event.target.name] = event.target.value;  arraySetSate(repilica);  };  const addDietLabels = () =gt; {  let replica = { ...state };  let arrayreplica = { ...arrayState };  replica.dietlabels.push(arrayState.dietlabels);  setstate(replica);  arrayreplica.dietlabels = '';  arraySetSate(arrayreplica);  };  const newlable = () =gt; {  };  const addHealthLables = () =gt; {  let replica = { ...state };  let arrayreplica = { ...arrayState };  replica.healthlabels.push(arrayState.healthlabels);  setstate(replica);  arrayreplica.healthlabels = '';  arraySetSate(arrayreplica);  };  const addcuisineType = () =gt; {  let replica = { ...state };  let arrayreplica = { ...arrayState };  replica.cuisineType.push(arrayState.cuisineType);  setstate(replica);  arrayreplica.cuisineType = '';  arraySetSate(arrayreplica);  };  const addmealType = () =gt; {  let replica = { ...state };  let arrayreplica = { ...arrayState };  replica.mealType.push(arrayState.mealType);  setstate(replica);  arrayreplica.mealType = '';  arraySetSate(arrayreplica);  };  const AddingredientsClick = () =gt; {  let replica = { ...state };  let arrayreplica = { ...arrayState };  let ingredientObj = { text: arrayState.ingredients.text, weight: arrayState.ingredients.weight };  replica.ingredients.push(ingredientObj);  setstate(replica);  arrayreplica.ingredients = { text: '', weight: '' };  arraySetSate(arrayreplica);  };  return (lt;div className="recipeForm container"gt;  lt;form style={{ display: 'flex', flexDirection: 'column', width: '70%', alignItems: 'center' }}gt;lt;label  className="addrecipe-labels" htmlFor="label"gt; Enter Recipe Name lt;/labelgt; lt;input type="text" id="label"  name="label"  placeholder="recipe name"  className="inputs"  value={state.label}  onChange={stringTypeFieldDataHandler}/gt;  lt;br/gt; lt;label className="addrecipe-labels" htmlFor="source"gt; Recipe Source lt;/labelgt; lt;input type="text" id="source"  name="source"  placeholder="enter source"  value={state.source}  onChange={stringTypeFieldDataHandler}  className="inputs"/gt; {/* lt;label className="addrecipe-labels" htmlFor="url"gt; URL lt;/labelgt; lt;input type="text" id="url" name="url" placeholder="paste url" className="inputs" /gt; */}  lt;div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly', margin: '5px 5px' }}gt;lt;label  className="addrecipe-labels" htmlFor="dietlabels"gt; diet labels lt;/labelgt; lt;input type="text" id="dietlabels"  name="dietlabels"  onChange={arrayElementSeparateStateHandler}  onChange={newlable}  value={arrayState.dietlabels}  placeholder="type labels"  className="inputs"/gt;  lt;button style={{ width: '40px' }} type="button" onClick={addDietLabels}gt; Addlt;/buttongt;  lt;pgt;{String(state.dietlabels)}lt;/pgt;lt;/divgt;  lt;div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly', margin: '5px 5px' }}gt;lt;label  className="addrecipe-labels" htmlFor="healthlabels"gt; Health labels lt;/labelgt; lt;input type="text"  value={arrayState.healthlabels}  onChange={arrayElementSeparateStateHandler}  id="healthlabels"  name="healthlabels"  placeholder="health lables"  className="inputs"/gt;  lt;button style={{ width: '40px' }} type="button" onClick={addHealthLables}gt; Addlt;/buttongt;  {String(state.healthlabels)} lt;/divgt;  lt;div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly', margin: '5px 5px' }}gt;lt;label  className="addrecipe-labels" htmlFor="cuisineType"gt; cuisine type lt;/labelgt; lt;input type="text" id="cuisineType"  value={arrayState.cuisineType}  onChange={arrayElementSeparateStateHandler}  name="cuisineType"  placeholder="add cautions"  className="inputs"/gt;  lt;button style={{ width: '40px' }} type="button" onClick={addcuisineType}gt; Addlt;/buttongt;  {String(state.cuisineType)} lt;/divgt;  lt;div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly', margin: '5px 5px' }}gt;lt;label  className="addrecipe-labels" htmlFor="mealtype"gt; meal type lt;/labelgt; lt;input type="text" id="mealtype"  name="mealType"  value={arrayState.mealType}  onChange={arrayElementSeparateStateHandler}  placeholder="add cautions"  className="inputs"/gt;  lt;button style={{ width: '40px' }} type="button" onClick={addmealType}gt; Addlt;/buttongt;  {String(state.mealType)} lt;/divgt;  lt;div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly', margin: '5px 5px' }}gt;lt;label  className="addrecipe-labels" htmlFor="ingredients"gt; ingredients lt;/labelgt; lt;input type="text" id="ingredients"  name="text"  value={arrayState.ingredients.text}  placeholder="ingredient"  className="inputs"  onChange={subIngredientStatePush}  style={{ margin: '0 5px' }}/gt;  lt;input type="text" id="quantity" name="weight" value={arrayState.ingredients.weight}  onChange={subIngredientStatePush} placeholder="quantity" className="inputs"/gt;  lt;button style={{ width: '50px', marginLeft: '7px' }} type="button" onClick={AddingredientsClick}gt; Addlt;/buttongt;  {JSON.stringify(state.ingredients)} lt;/divgt;  {/* lt;label className="addrecipe-labels" htmlFor="country"gt; Country lt;/labelgt; lt;select id="country" name="country" className="inputs"gt; lt;option value="australia"gt;Australialt;/optiongt; lt;option value="canada"gt;Canadalt;/optiongt; lt;option value="usa"gt;USAlt;/optiongt; lt;/selectgt; */}  lt;label className="addrecipe-labels" htmlFor="recipe-description"gt; Recipe description lt;/labelgt; lt;textarea  id="recipe-description" name="makingDescription" value={state.makingDescription}  onChange={stringTypeFieldDataHandler} placeholder="Write something.." style={{ height: '200px' }}  className="inputs"gt;lt;/textareagt;  lt;div style={{ margin: '15px 0' }}gt;lt;label className="addrecipe-labels" htmlFor="recipeImage"gt; Add recipe  image lt;/labelgt; lt;input type="file" name="recipeImage" onChange={imageUploadFileHandler} id="recipeImage"/gt;lt;/divgt;  lt;input type="submit" value="Submit" className="inputs submit" onClick={onFormSubmit}/gt;lt;/formgt;  lt;/divgt;); }  export default AddRecipes;