从映射数组中过滤掉 onClick

Question

I am trying to figure out how to filter out a mapped array and making the rest of the results disappear in the same component. I've done the same with React Router as I can route the result to a different page but I am wondering if there is a way to do the same on the same component? I have a Directory component (below) that is mapping through an array to display results of items on the page.

I would like to click on one of the elements and remove the rest. I tried to incorporate a filter method in the same component but drawing blanks on how I should implement it. Let me know what you think!

import React from 'react'
import { Card, CardImg} from 'reactstrap'

function Presentational({example, onClick}){
    return(
        <Card onClick={()=> onClick(example.name) }>
            <CardImg src={example.image}/>
        </Card>
    )
}

function Directory(props){

    const examples = props.propExample.map(example=>{
        return (
            <div>
                <Presentational example={example} onClick={props.onClick} />
            </div>
        )
    })

    return(
        <div>
            {examples}
        </div>
    )
}

export default Directory;

Answer 1

You may use useState hook for selection

We store clicked elements inside the state variable selected. using useState hook. When the user clicks on the element react component will remember which element he clicked and will render an array from 1 clicked element [selected] .

In order to cleanup selection, just call setSelected()

It is the same logic as you want.

import React, {useState} from 'react'
import { Card, CardImg} from 'reactstrap'

function Presentational({example, onClick}){
    return(
        <Card onClick={()=> onClick(example.name) }>
            <CardImg src={example.image}/>
        </Card>
    )
}

function Directory(props){
    const [selected, setSelected] = useState()
    const examples = (selected ? [selected] : props.propExample).map(example=>{
        return (
            <div>
                <Presentational example={example} onClick={(name) => {
                     props.onClick(name)
                     setSelected(example)
                  }}
                />
            </div>
        )
    })

    return(
        <div>
            {examples}
        </div>
    )
}

export default Directory;

if you want to do it with a filter clause it will look almost the same, but with the extra operations

import React, {useState} from 'react'
import { Card, CardImg} from 'reactstrap'

function Presentational({example, onClick}){
    return(
        <Card onClick={()=> onClick(example.name) }>
            <CardImg src={example.image}/>
        </Card>
    )
}

function Directory(props){
    const [selected, setSelected] = useState()
    const examples = props.propExample.filter(it => typeof selected === 'undefined' || it.name === selected).map(example=>{
        return (
            <div>
                <Presentational example={example} onClick={(name) => {
                     props.onClick(name)
                     setSelected(name)
                  }}
                />
            </div>
        )
    })

    return(
        <div>
            {examples}
        </div>
    )
}

export default Directory;