React on Click put images

Question

in last my question you do very good job, now i get new issue, can any one explain why my function "done" doesn't" do anything? for now everything works just not that function, all project bee that kids select multiple photos, press done and then should application put them answers and photos whos have "isCorret:true" just bellow.

import React, {Component} from 'react'



class App extends Component {
    constructor(props){
        super(props);
        this.selected = this.selected.bind(this);
        this.done=this.done.bind(this);
        this.state = {items: []}
    }
    componentDidMount(){
        fetch("http://localhost:3000/api/items")
        .then(res => res.json())
        .then(result =>{
            this.setState({
                isLoaded:true,
                items: result
            })
        })
        .catch(e => console.log(e))
    }

selected(e){
    let target = e.currentTarget;
    target.classList.toggle('selected')
}
done(){
    {this.state.items.map((item) =>{
        if(item.isCorrect)
        {
            return(
            <div className="divas"><img src={item.img}/></div>
        )
            }
        })}
}

render(){
    return(
        <div>
            <div  align="center"><div className="Helloo"><h1>Choose Kitchen Tolls</h1></div></div>
            <div className="Line">
        {this.state.items.map((item) =>
    <div className="divas"> <img src={item.img} onClick={this.selected}/></div>
        ) } 
        </div>
        <div align="center">
        <button className="Baigta" onClick={this.done}><img src="/images/Check.jpg"/></button>
        </div>

        </div>         
    )

}

}


export default App

class UserApiController {


    constructor() {
        this.getUsers = this.getUsers.bind(this)
      //  this.findUser = this.findUser.bind(this)

    }

    _virtuve() {
        return [
            {img: "/images/Keptuve.jpg",  isSelected:false, isCorrect:true},
            {img: "/images/Peilis.jpg",  isSelected:false, isCorrect:true},
            {img: "/images/Kamuolys.jpg",  isSelected:false, isCorrect:false},
            {img: "/images/Sakute.jpg",  isSelected:false, isCorrect:true},
            {img: "/images/Piestukai.jpg",  isSelected:false, isCorrect:false},
            {img: "/images/Lekste.jpg", isSelected:false, isCorrect:true},
            {img: "/images/Sukos.jpg",  isSelected:false, isCorrect:false},
            {img: "/images/Puodas.jpg",  isSelected:false, isCorrect:true},
            {img: "/images/Kompiuteris.jpg", isSelected:false, isCorrect:false},
            {img: "/images/Kojines.jpg", isSelected:false, isCorrect:false},

        ]
    } 

    getUsers(req, res, next) {
        const items = this._virtuve()
        return res.json(items)
    }


   /* findUser(req, res, next) {
        const userId = parseInt(req.body.userId) || 0
        const users = this._usersList()
        const amount = users.length
        let result = {}
        for (let i=0; i < amount; i++) {
            let user = users[i]
            if (user.id == userId) {
                result = user
                break
            }

        }
            return res.json(result)


    }
*/
}


module.exports = UserApiController

Answer 1

It's because the information that is returned from the done function is not used anywhere. Instead, maybe make a state which tracks whether the user is done or not. Then when a user is done, you can conditionally render a new component which contains all your pictures.

Edit: Yup, basically what @Songgren suggests.

Answer 2

Please try like this

import React, {Component} from 'react'

class App extends Component {
    constructor(props){
        super(props);
        this.selected = this.selected.bind(this);
        this.done=this.done.bind(this);
        this.state = {
           items: [],
           done: false
        }
    }
    componentDidMount(){
        fetch("http://localhost:3000/api/items")
        .then(res => res.json())
        .then(result =>{
            this.setState({
                isLoaded:true,
                items: result
            })
        })
        .catch(e => console.log(e))
    }

    selected(e){
        let target = e.currentTarget;
        target.classList.toggle('selected')
    }
    done(){
        this.setState({ done: true});
    }

    render(){
        return
        (
            <div>
                <div align="center">
                    <div className="Helloo">
                        <h1>Choose Kitchen Tolls</h1>
                    </div>
                </div>
                <div className="Line">
                    {this.state.items.filter(item => !this.state.done || item.isCorrect).map((item) =>
                       <div className="divas">
                           <img src={item.img} onClick={this.selected}/>
                       </div>
                    )} 
                </div>
                <div align="center">
                <button className="Baigta" onClick={this.done}>
                    <img src="/images/Check.jpg"/></button>
                </div>
            </div>         
        )
    }
}