How to make the value of an input field visible onClick of update/edit icon in a CRUD App Reactjs.

Reetah 's photo
Reetah
·

2 min read

Table of contents

No heading

No headings in the article.

I’m assuming when you click on the edit button, a modal pops up or a new page shows up… In my case, its a modal*……Follow along😊

In the page where you’re hosting the component that’ll display the modal for the update/edit page e.g Page.js, declare a state to hold the value of the input field which in my case is title and body and set them to their type(string, digit or boolean) in my case string (‘ ‘). Like this: Screen Shot 2022-03-14 at 3.52.13 PM.png


Next, go to where you’re passing the props for the update/edit page and pass in the state as a prop . Like this:

Screen Shot 2022-03-14 at 3.55.48 PM.png


Next, go to the update/edit page(update.js or edit.js) and pass the props in the component declaration like this:

Screen Shot 2022-03-14 at 4.10.23 PM.png

Next, set the already declared state which has open strings (‘ ‘)as default value in the update page 👉 // Const [title. setTitle] = useState(‘ ’) to the props.state Like this: const [title, setTitle] = useState(updateField.title).png


Next, go to the input section which I’m believing value is already set to the declared state and the onChange function is also set to the setState. Like this:

value=(title).png

Pasted Graphic.png

At this juncture, I’m guessing you already have an onSubmit function handling the submission for the create and edit button/icon Your code should look like this in the update/edit page

import React, useState, useCallback, useEffect.png

Your input section should look like this:

placeholder='Enter title here'.png

crudJavaScriptReactpropsWeb Development