I am a React noob. This is my practice project reduced down to the essentials.

function App() {
   var myParagraph = <p>Rutabaga</p>;
   function MyClickHandler() {
      myParagraph.textContent = "CARROT"; // ERROR
   }
   var myButton = <button onClick={MyClickHandler}>MY BUTTON</button>
   return <>{myParagraph}{myButton}</>
}

export default App;

My actual practice project is lot bigger than this. What I’ve written here is the minimum to reproduce the problem I’m having. It displays the text and button, but when I click the button I get an error.

I’d like for the line marked // ERROR to replace the inner text contents of the <p> with new text. I imagine there should be a single line of code that will replace the contents with my new text, or maybe I need to supply some placeholder inside the paragraph that can be written into later on.

I’ve tried using setState, but I get the same error complaining that it cannot set that property.