CODEWITHSUNDEEP
reactjs
RamTeja
RamTeja

Reputation: 43

on click i want to generate alert in react js method

This is my code:

generateAlert = () => {
    alert('hi');
}

return <Tile
    click={(index)=>{this.generateAlert}}
    title={tile.title} 
    value={tile.value}
    key={tile.id}
/>

This is the error I'm getting:

Expected an assignment or function call and instead saw an expression no-unused-expressions Search for the keywords to learn more about each error.

Upvotes: 0

Views: 2281

Answers (3)

Mario
Mario

Reputation: 56

I will do in this way:

Q: why I export Tile to new component?

A: As each component should be as short as possible. There is a many advantages to doing in this way like: "easy to find bugs (testing)".

import React, { Component } from "react";
import Tile from "./Tile";
import "./App.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.generateAlert = this.generateAlert.bind(this);
  }

  generateAlert = () => {
    alert("Hi");
  };

  render() {
    return (
      <Tile
        click={this.generateAlert}
        title={"This isa a Title"}
        value={"This is the value"}
      />
    );
  }
}

export default App;

and file Tile.js:

import React, { Component } from "react";

export default class Tile extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <button onClick={this.props.click}>click me</button>
        <p>{this.props.title}</p>
        <p>{this.props.value}</p>
      </div>
    );
  }
}

This file Tile.js are ready for future addons but if you want to use only like it is now I would recommend to change into stateless component:

import React from "react";

const Tile = props => {
  return (
    <div>
      <button onClick={props.click}>click me</button>
      <p>{props.title}</p>
      <p>{props.value}</p>
    </div>
  );
};

export default Tile;

Upvotes: 0

syntax-punk
syntax-punk

Reputation: 4570

Hei!

If it's a function invocation inside your component's onClick function, you need to add () after this.generateAlert in your component

So it's gonna be like:

return <Tile
  click={(index)=>{this.generateAlert()}}
  title={tile.title} 
  value={tile.value}
  key={tile.id}
/>

Otherwise, you can use your function as a onClick callback per se.

In that case you need to have it like this:

return <Tile
  onClick={this.generateAlert}
  title={tile.title} 
  value={tile.value}
  key={tile.id}
/>

Cheers!

Upvotes: 1

Jolly
Jolly

Reputation: 1768

First, I do wonder if in your Component you have an array of Tile data, and you want to render a Tile for each entry of the array (I thought so because you added the key prop to Tile).

Anyways, I made an example similar to what you want to achieve, and it's working. Look at this:

const Tile = (props) => {
    return (
        <div className="Tile">
            <h3>{props.title}</h3>
            <div onClick={props.click}>
                {props.value}
            </div>
        </div>
    );
}

class App extends React.Component {
    constructor(props) {
        super(props);
    }
    
    generateAlert = () => {
        alert("Hi");
    }
    
    render() {
        return (
            <Tile
                click={this.generateAlert}
                title={"This isa a Title"}
                value={"This is the value"} />
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));
@import url(https://fonts.googleapis.com/css?family=Montserrat);

body {
    font-family: 'Montserrat', sans-serif;
}
<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>

<div id='root'></div>

Now, I may help you in a deeper way if you would post the code of the Component that wants to render Tile; maybe, there are some error in that.

Upvotes: 1

Related Questions