Return a string on button click in React hooks

Question

I am trying to print a string upon button click inside React hooks.

This button called "More Info" is inside a return tag of a hook I created. (JSX) when this is clicked it calls another function component called "ChangeName" that should print a string.

I am not sure if I am writing some wrong syntax or missing something? The console.log inside the function displays the string in the log but the div tag just doesn't print the string on the console,

created a custom hook and the button is inside its return tag.

 <button onClick ={ChangeName}>More Info <button>

onclick should call and print results from the below function

 function ChangeName(){ 
         console.log("This is a test") //works
          return (<div>"This is a test"</div>)
          }

Duy Khánh · Accepted Answer · 2019-07-09 03:29:43Z

1

Tt's not related react hook , if you want to print string above button you should make a state use useState from react hooks

const SomeComp = () => {
   const [value, setValue] = useState("")
   const changeName = () => {
      setValue("some value changed")
   }
   return (
     <>
     {value.length > 0 && <div>{value}</div>}
     <button onClick={changeName}>Change Name</button>
     </>
   )
}

answered Jul 9, 2019 at 3:29

Duy Khánh

432 bronze badges

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

9 Comments

oceans Over a year ago

hey i tried to add the code you shared but it still doesn't display the output

oceans Over a year ago

basic structure of my code is as follows. function Data{ some code that pulls a list from API return ( loops through to display the list within <li> tags. Each loop has a button called More Info. Onclick of this button will trigger another function called Change Name that should display the details. SInce my button click isnt working I am trying to output a simple string to start with. Once that works will I be able to pass an Object to display its details

Duy Khánh Over a year ago

it"s worked, i try in blank project. do you see any error ? You should up more detail code

oceans Over a year ago

I am now trying to output the data when the button is clicked. (in the link shared above) instead of a simple string.

Duy Khánh Over a year ago

i dont see any extra data you want to show but the idea is when you click button more info, you should have a state as an array to contain your selected id of item you want to show more info .

|

Collectives™ on Stack Overflow

Return a string on button click in React hooks

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related