0

I am working on Creating a card everytime a user clicks Add Card, it should call my function called AddCard and create another card, but i seem to be getting the following error in my console: TypeError: this is undefined

Here is my Card.Js file:

    import React, { Component } from 'react';
import { Card, Button } from 'react-bootstrap';


export class MyCard extends React.Component {
    constructor(props) {
        super(props)
    }
  AddCard = function () {
      return(
          console.log("I am Clicked"),
        <Card style={{ width: '18rem' }}>
        <Card.Img variant="top" src="holder.js/100px180" />
            <Card.Body>
            <Card.Title>Card Title</Card.Title>
            <Card.Text>
                Some quick example text to build on the card title and make up the bulk of
                the card's content.
            </Card.Text>
            <Button variant="primary">Go somewhere</Button>
            </Card.Body>
            </Card>
      )

  }
    render() {
        return (
            <Button type='submit' onClick={function(){this.AddCard()}}>Add Card</Button>


        )
    }
}
Mohammed Ismail
  • 196
  • 1
  • 15
  • Instead try as `onClick={this.AddCard}` or `onClick={() => this.AddCard()}`. Refer to [this question](https://stackoverflow.com/questions/48699573/correct-use-of-arrow-functions-in-react). – norbitrial May 13 '20 at 13:49
  • @norbitrial I have tried that, it doesnt render the new component but now the error in my console does go away – Mohammed Ismail May 13 '20 at 13:51

0 Answers0