Question 72908 in Reactjs Question posted in
The new location for the React Documentation can be found here.

I am trying to have a random card image show with onClick event – Reactjs

Im still learning react. What Im trying to do is make a card when clicked show a random image from "const images" When I call handle click from "const DefaultCardContents1" Backside/ Image I get the error handleClick is not defined. Any help is appreciated Thanks.

srcexampleApp.js
  Line 96:18:  'handleClick' is not defined  no-undef

Code is here...

import React, { Component } from 'react';
import Flippy, { FrontSide, BackSide } from './../lib';
import Rick from './rick.png';
import AmmoCard from './AmmoCard.png';
import BackpackCard from './BackpackCard.png';
import './App.css';
import { useState } from "react";



const images = [
  
  "https://via.placeholder.com/150/0000FF/808080",
  "https://via.placeholder.com/150/FF0000/FFFFFF",
  "https://via.placeholder.com/150/00FF00/000000"
];

function RandomImage() {
  const [currentImage, setCurrentImage] = useState(images[0]);

  const handleClick = () => {
    const randomIndex = Math.floor(Math.random() * images.length);
    setCurrentImage(images[randomIndex]);
  };
   };
  


const FlippyStyle = {
  width: '200px',
  height: '300px',
  textAlign: 'center',
  color: '#FFF',
  fontFamily: 'sans-serif',
  fontSize: '30px',
  justifyContent: 'center',
  paddingRight: '150px' ,
  paddingLeft: '150px'
}






const DefaultCardContents1 = ({ children }) => (



  <React.Fragment>
    <FrontSide
      style={{
        backgroundColor: '0',
        display: 'flex',
        alignItems: 'center',
        flexDirection: 'column'
      }}
    >
      <img
        src={Rick}
        style={{ maxWidth: '130%', maxHeight: '100%' }}
      />
      
      <span 
        style={{
          fontSize:'12px',
          position: 'absolute',
          bottom: '10px',
          width: '100%'
        }}>
        {children}<br />
        
      </span>
    </FrontSide>
    <BackSide
      style={{
        backgroundColor: '',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'column'
      }}>




      <img
        src={RandomImage}
        style={{ maxWidth: '130%', maxHeight: '100%' }}
        onClick={handleClick}
        
        
      />
      
      <span 
        style={{
          fontSize:'12px',
          position: 'absolute',
          bottom: '10px',
          width: '100%'
        }}>
        {children}<br />
        
      </span>
    </BackSide>
  </React.Fragment>);


  const DefaultCardContents2 = ({ children }) => (
  <React.Fragment>
    <FrontSide
      style={{
        backgroundColor: '0',
        display: 'flex',
        alignItems: 'center',
        flexDirection: 'column'
      }}
    >
      <img
        src={Rick}
        style={{ maxWidth: '130%', maxHeight: '100%' }}
      />
      
      <span 
        style={{
          fontSize:'12px',
          position: 'absolute',
          bottom: '10px',
          width: '100%'
        }}>
        {children}<br />
        
      </span>
    </FrontSide>
    <BackSide
      style={{
        backgroundColor: '',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'column'
      }}>

       <img
        src={BackpackCard}
        style={{ maxWidth: '130%', maxHeight: '100%'}}
        
      />
      
      <span 
        style={{
          fontSize:'12px',
          position: 'absolute',
          bottom: '10px',
          width: '100%'
        }}>
        {children}<br />
        
      </span>
    </BackSide>
  </React.Fragment>);

  


const FlippyOnClick1 = ({ flipDirection = 'vertical' }) => (
  <Flippy
    flipOnClick={true}
    flipDirection={flipDirection}
    style={FlippyStyle}
    
  >
    <DefaultCardContents1>
      
    </DefaultCardContents1>
  </Flippy>
);


const FlippyOnClick2 = ({ flipDirection = 'vertical' }) => (
  <Flippy
    flipOnClick={true}
    flipDirection={flipDirection}
    style={FlippyStyle}
  >
    <DefaultCardContents2>
      
    </DefaultCardContents2>
  </Flippy>
);


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isFlipped: false
    };

    setInterval(() => {
      this.setState({
        isFlipped: !this.state.isFlipped
      });
    }, 3000);
  }

  render() {
    return (
      
     <div className="App">
        <div style={{ display: 'flex', flex: '1 0 200px', justifyContent: 'center', 'flex-wrap': 'wrap' }}>
            
                             
          <FlippyOnClick1 />
          <FlippyOnClick2 />         
          
        </div>
      </div>

    );
  }
}
 export default App;

I was expecting to have a a random image show when card clicked.

Tags:

3

Answers


  1. 0

    You have defined const handleClick in wrong place. It need to be in const DefaultCardContents1. And you using hook next to this.state functions, which is very bad practice.

    Login or Signup to reply.
  2. 0

    handleClick is undefined because its neither in your ‘DefaultCardContents1’ component where you’re trying to call it nor is it passed as props. You can try defining it ‘DefaultCardContents1’ component instead. Not quite sure what you’re using the RandomImage fn for because it does not have any return expression

    Login or Signup to reply.
  3. 0

    Your handleClick needs to be defined in the DefaultCardContents1 function. Also it’s best practice to wrap the image in a button and use the button to handle the click, and not defining it on the image directly.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search