在 ReactJS 中，从父组件切换子组件中的图像

Question

I have a parent component, RoutineDashboard, with a child component, . The child component has two props, image and checked, which are both images. I only want one of the images to show at a time. How can I use the button in the child component to toggle between the images in from the parent component?

import react, { Component } from 'react';
import { Route, NavLink, Switch} from 'react-router-dom';
import TaskCard from '../../Components/TaskCard';
import socks from '../../Images/iPhone 11 Pro/socks.svg';
import check from '../../Images/iPhone 11 Pro/check.svg';

class RoutineDashboard extends Component {
    
    state = {
        tasks: 4,
        completeTasks: 0
    }

  
    
    updateTaskCountHandler (className) {}
 

        
    
    render () {
      
        
        

    return (
        <div>
              <div  className="Container">  
                <div className="Tasks">
                    <TaskCard clicked={() => this.updateTaskCountHandler("task1")} className="task1" image={socks} check={check} title={'Get Dressed'}/>
                    
                </div>
            </div>
        </div>
    );
    }
}

export default RoutineDashboard;

Below is the child component:

import react from 'react';
import { Route, NavLink, Switch, Redirect } from 'react-router-dom';
import './TaskCard.css';
import star from '../Images/iPhone 11 Pro/star.svg';
import check from '../Images/iPhone 11 Pro/check.svg';
// import bed from '../Images/iPhone 11 Pro/bed.svg';


function TaskCard (props) {


    function toggleCheck () {
        
    }

    return (
        <div>
            <div className="TaskCard">
                <div className="card w-100">
                    <div className="card-body">
                        <div className="TaskItems">
                            <img src={props.image}></img>
                            <img src={star}></img>
                            
                            <h5 className="card-title">{props.title}</h5>
                                <a href="#" id={props.id} className="btn btn-primary" onClick={()=>props.clicked()}>Done</a>
                                <img id="check" className="Check" src={check}></img>
                        </div>
                    </div>
                </div>  
            </div>
        </div>
    );
}

export default TaskCard;

Answer 1

You can add a boolean variable to state and show the images based on this variable value. You can also change its value when pressing the button.