How can i change my non input tag in react?

Question

const [text, setText] = useState('Hello friend')

return

<p>{text}</p>

How can I put a cursor between a hello and a friend and write something? It should look like I write in a p or div tag, not like I write in a text area or input.

We might need more details for your question. Can you give more context? — twharmon, Apr 12 '20 at 01:10
Might be a duplicate of https://stackoverflow.com/questions/22677931/react-js-onchange-event-for-contenteditable/27255103#27255103 — twharmon, Apr 12 '20 at 02:42

twharmon · Accepted Answer · 2020-04-12T17:18:12.527

Use contentEditable attribute, and useRef:

import React, { useRef } from "react";

export default function App() {
  const text = useRef("Hello friend");

  const handleChange = e => {
    text.current = e.target.innerText
  };

  return (
    <p contentEditable="true" onInput={handleChange}>
      {text.current}
    </p>
  );
}

Making this work with useState might be difficult. Could you use an <input> and style it to look like a <p>?

input {
  border: 0;
  background: transparent;
}

How can i change my non input tag in react?

1 Answers1