edit text input React

Question

Is there any way of inject text of database into the input to be editable? not like placeholder.

Here is a picture as example.

In this case the text is placed as placeholder and obviously can not be editable without erase all.

Here is the code:

<div style={modalStyle} className={classes.paper}>
            <form className="update-note create-note">
              <input
                className="input-edit-note"
                name="title"
                onChange={(e) => setTitle(e.currentTarget.value)}
                value={title}
                placeholder={props.title}
              />

              <textarea
                name="content"
                onChange={(e) => setContent(e.currentTarget.value)}
                value={content}
                placeholder={props.content}
              />
              <Fab onClick={submitNote}>
                <AddCircleIcon />
              </Fab>
            </form>
          </div>

Tomas · Accepted Answer · 2020-12-03 18:48:51Z

1

Whatever you put in value={...} will be visible to edit in the textfield. If it's props that you want to merge with component local data then I'd suggest doing so via useState and useEffect

Either this:

const Example = (props) => {
  const [title, setTitle] = useState(props.title);
  ...
}

or like this

const Example = (props) => {
  const [title, setTitle] = useState('');
  
  useEffect(() => {
    setTitle(props.title);
  }, [props.title]);
  ...
}

And then use the value in the input tag

<input
  ...
  value={title}
  ...
/>

Example component:

// When initiating this component, make sure to pass "title" as props
const Example = (props) => {
  // Title is bound to state within this component
  const [title, setTitle] = useState(props.title);
  
  const _onChangeTitle = e => {
    setTitle(e.target.value);
  }
  
  return (
    <input
      className="input-edit-note"
      name="title"
      onChange={_onChangeTitle}
      value={title}             // title will always be state title
      placeholder={props.title} // props.title will always remain the same
    />
  )
}

edited Dec 3, 2020 at 18:48

answered Dec 3, 2020 at 17:34

Tomas

1,0519 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alan Over a year ago

Sorry, I deleted the prev messege, now I removed the placeholder and what it happens is that the input field is empty

Tomas Over a year ago

Alright, no worries. I'll update with a full component as example in a lil bit.

Lorenzo Case Del Rosario · Accepted Answer · 2020-12-03 17:44:40Z

1

once you get your data from you db save it in your component state as i see you're already doing:

const MyComponent = (props) => {
  const [title, setTitle] = useState(props.title);
  ...
}

then set theinput's value equal to the title data you recieve from your db. At the onChange trigger the setTitle function that will update your title state.

<input
  className="YourProfileInput"
  placeholder="Insert Title"
  value={title}
  onChange={(e) => setTitle(e.currentTarget.value)}
/>

answered Dec 3, 2020 at 17:44

Lorenzo Case Del Rosario

831 silver badge10 bronze badges

2 Comments

Alan Over a year ago

Works, but when I try to edit the note for a second time the input field shows empty.

Lorenzo Case Del Rosario Over a year ago

what do you mean with "for a second time"?

Collectives™ on Stack Overflow

edit text input React

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related