React - conditional output using ternary operator based on variable

Question

I have the following code that sets a div to be shown or hidden based on the value of showFiles[game.identifier]. Showing just the code related to showFiles() for brevity:

    constructor() {
        this.state = { showFiles: [] }

    toggleFiles = (id) => {
        let a = this.state.showFiles;
        a[id] = !a[id];
        this.setState({showFiles: a});
    }

    renderResults() {
        const {showFiles} = this.state;

        return (
            <SNIP>
            <div className='files' id={'files_' + game.identifier} 
             style={{display: this.state.showFiles[game.identifier] ? 
             'block' : 'none'}}>

This works perfectly fine, defaulting to 'none' until an action is taken to toggle it to 'block'. However, I'm trying to use the ternary for similar purposes below and it's failing:

    constructor() {
        this.state = { scaninfo: [] }

    getScaninfo(id, title) {
        const {scaninfo} = this.state;
        var cover = false;

        if (title.search(/box/i) >= 0) { cover = true; }
        scaninfo.push({key: id, value: {cover: cover});
        return scaninfo;
    }
    renderResults() {
        const {scaninfo} = this.state;
        console.log(scaninfo);

        return (
            <SNIP>
            <br />Covers = {
                scaninfo.filter(scaninfo => scaninfo.key === game.identifier)
                .map(scan => scan.value.cover) ? 'cover found' : 'cover not found'}

This does not work. It always renders 'cover found', regardless of the scan.value.cover value.

The call to getScaninfo() is not shown above because it's in more complicated code that's hard to break out, but I've verified that it's being run, that scaninfo.value.cover contains a mix of true and false values in the console log, and that it's returning boolean true rather than a literal string. Eg.:

1: {…}
key: "3-d-tic-tac-toe-sears-atari2600-hiresscans"
value: Object { cover: true, media: false, manual: false }

2: {…}
key: "activisionvideogamecatalogwinterspring1984"
value: Object { cover: false, media: false, manual: false }

I'm not clear on why that's failing to work like the first example. The most obvious difference is that the first is wrapped in double braces, but my browser throws a syntax if I try that here.

Can anyone explain what I'm missing here?

Thanks.

@jdaz - thanks for the formatting cleanup. I was unaware of the inline code tags. Looks much cleaner that way, and will keep in mind for the future. — Jared
– Jared, Commented Jul 18, 2020 at 7:56

jdaz · Accepted Answer · 2020-07-18 07:47:34Z

1

You just need another set of parentheses in your call to map:

Covers = { scaninfo.filter(scaninfo => scaninfo.key === game.identifier)
    .map(scan => (scan.value.cover ? 'cover found' : 'cover not found')) }

Note that this will return an array, and that may be where you are getting tripped up. map runs the passed function on each item in an array, and returns a new array. So you will get an array of ['cover found', 'cover not found', ...] etc. for each item returned from the call to filter.

edited Jul 18, 2020 at 7:47

answered Jul 18, 2020 at 7:38

jdaz

6,0812 gold badges24 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jared Over a year ago

That was it! I figured it was probably something simple I was missing. I'm still quite green with react (and with javascript in general, to an extent), so I'm a little iffy on understanding where I can or should wrap things in () or {}. What you showed there makes sense, though. And yeah - I know it's an array... that's nested under another array (games) that's mapped. Getting the expected output now. Thanks again!

Collectives™ on Stack Overflow

React - conditional output using ternary operator based on variable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related