React Js alert on click button

[Soopah]

Hi there,
I’m a beginner in Programmation and I have this simple code and it doesn’t work. I just want to create an alert when I click on the button. I can’t see the problem thank you very much.

class footer extends React.Component{
render() {  
return (

<footer className={styles.footer} alt="tests">

<button className={transform} onClick={this.handleClick}>
</button>

</footer>

);

}

}


     class transform extends React.Component {

      constructor(transform) {

      super(transform);

      this.handleClick = this.handleClick.bind(this);

    }

      handleClick() {
      alert (test);
  }
 }

 

export default footer;

[jwilkins.oboe]

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

[jwilkins.oboe]

Hi @Soopah !

Welcome to the forum!

I don’t see why you would need to create a class if all it is doing is the handleClick function.

I would add the alert right in the onClick function.

   <button onClick={() => alert("You clicked the button")}>
        Show alert
   </button>

[Soopah]

Thank you very much. I would like to create a class because this is the first step of the exercise. After this, I have to do a flip book. I will use the button to turn the pages of the book. I will use state and setState (I guess). Sorry if my English is not perfect I’m French.

[jwilkins.oboe]

Is your transform supposed to be the parent component?

If so, you can nest the Child component (Footer) inside the parent and pass the handleClick down to the child.

Maybe you can try something like this and get the alert working.

react-alert-example - CodeSandbox

Sidenote: Class names should start with a capital letter.

[kevinSmith]

Yes, adding onto Jessica’s good advice,

If transform is it’s own component, then it should have a render method. Additionally, in this line:

<button className={transform} onClick={this.handleClick}>

The this there refers to the footer component, not the transform component.

Also, in React, component names should be CamelCase.

Also:

      constructor(transform) {
        super(transform);

Traditionally that variable is not called “transform” but is called “props”.

Also, you don’t really need a constructor there - you don’t need to bind your this if you use arrow functions. But you may not have been taught that yet.

[Soopah]

Ok, thank you very much.

[Soopah]

Maybe I learn less fast than teachers learn me With no joke I just start to learn React from few days. And I have to do a flip book for my portfolio. I will change the Alert by some animations on a div. It’s not simple thank you.

[jwilkins.oboe]

@Soopah

some animations on a div.

Do you have to create the animations by scratch?

If not, then maybe you can find an animation on the npm registry.

npm | Home

[Soopah]

Thank you I will watch this but we can not use “pre-code”

[Soopah]

In fact, there is all the code I need on it. Amazing thank you very much. I’m saved