How to show html filter/map array with Onclick in React

  arrays, dictionary, filter, javascript, reactjs

I am attempting to show a filtered array though onClick event in React. I would like the li tag to only show when the Button is clicked. I get no error message but nothing is populated when i click my Button

Essentially I would like to render my li tag with the filtered results and show it on my page when Button is clicked

class SmoothieFilter extends React.Component {
    smoothie = () => {
        const smoothieNames = ["tasty", "chocolate", "yummy", "strawberry", "banana", "blueberry", "raspberry", "mango" ];
        smoothieNames.filter(faves => faves.includes("yummy")).map(faveSmoothie => (
            <li>{faveSmoothie}</li>
        ));
    }

    render() { 
        return (
            <Button variant="dark" onClick={this.smoothie}>CLICK ME</Button>
        )
    }
}

export default SmoothieFilter;

Any ideas?

Source: Ask Javascript Questions

LEAVE A COMMENT