CODEWITHSUNDEEP
javascriptreactjs
Rohit Verma
Rohit Verma

Reputation: 3785

Heading text not getting on button click in reactJs?

I have button & i'm getting button text in console.log. But now i want to this button text in <h2> tag but this is not working whats wrong with it?

My Code:-

const Forms = () => {
 
const handleClick =( event) => {
const theText = event.target.textContent;
console.log(theText);
};

    return (
    <div>
    <h2>{theText}</h2>
    <button onClick={handleClick}>click</button>
    </div>
    );
};

ReactDOM.render(<Forms />, document.getElementById("root"));
<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Comment this line <h2>{theText}</h2> to get button text in console.log.

Thanks for your efforts!

Upvotes: 0

Views: 64

Answers (4)

Andy
Andy

Reputation: 63524

The basic workflow of React is that a component 1) initially renders 2) the state of the component changes, 3) the component re-renders based on that new state.

So you need to introduce state to your component so that when you click the button the state of the text changes.

const { useState } = React;

function Forms() {

  // Initially set the state to an empty string
  const [text, setText] = useState('');

  function handleClick(event) {

    // Now grab the textContent from the button
    // and set the state. The component will immidiately
    // re-render, and the H2 will be set to `text`
    const { textContent } = event.target;
    setText(textContent);
  };

  return (
    <div>
      <h2>{text}</h2>
      <button onClick={handleClick}>click</button>
    </div>
  );
};

// Render it
ReactDOM.render(
  <Forms />,
  document.getElementById('react')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Upvotes: 1

Tushar Shahi
Tushar Shahi

Reputation: 20461

The variable theText is scoped to the {} block. Since you want to change something in the view using this variable, it should be in your state.

Try using the useState hook. Now everytime your theText changes there is a rerender and the view gets updated.

const Forms = () => {
const [theText,setTheText] = useState("default"); 
const handleClick =( event) => {
const theText = event.target.textContent;
setTheText(theText);
};

    return (
    <div>
    <h2>{theText}</h2>
    <button onClick={handleClick}>click</button>
    </div>
    );
};

Notice how I have the same variable name theText but there will be no conflicts. This is a major advantage of using const/let they are block scoped.

Upvotes: 2

akhtarvahid
akhtarvahid

Reputation: 9769

This is how you can save to state and access

 const Form = () => {
  const [selectedText, setSelectedText] = React.useState("");
  const handleClick = (event) => {
    const theText = event.target.textContent;
    setSelectedText(theText);
  };

  return (
    <div>
      <h2>{selectedText}</h2>
      <button onClick={handleClick}>click</button>
    </div>
  );
}

Upvotes: 1

kevin
kevin

Reputation: 1112

import {useState} from 'react'    

const Forms = () => {
     const [text,setText] = useState();
    const handleClick =( event) => {
    const theText = event.target.textContent;
     setText(theText);
    console.log(theText);
    };
    
        return (
        <div>
        <h2>{text}</h2>
        <button onClick={handleClick}>click</button>
        </div>
        );
    };

This can be achieved with state.

Upvotes: 1

Related Questions