Ternary operation should return simple array

Question

I learned React and JavaScript and now I can't get this ternary operation to work

In the code below the return { getData }; should return just an:

const data = [
    { name: 'name', type: 'someType' },
    { name: 'name', type: 'someType' },
];

populated with the liveFile values but I don't understand the syntax can someone explain?

import React, { useEffect, useState } from 'react';
import moment from 'moment';
import { withFirebase } from '../../../../../firebase';
import * as FIRESTORE from '../../../../../constants/firestore';

const File = ({ file, firebase }) => {
    const classes = useStyles();
    const [liveFile, setFile] = useState();
    const [error, setError] = useState();

    useEffect(() => {
        firebase.db
            .collection(FIRESTORE.USER_TEMP_FILES)
            .doc(firebase.auth.currentUser.uid)
            .collection(FIRESTORE.EDIT_FILES)
            .doc(file.file.name)
            .get()
            .then(item => {
                let fileItem;
                if (item.exists) {
                    setError(null);
                    fileItem = {
                        ...item.data(),
                        name: file.file.name,
                        path: file.file.path,
                        size: file.filesize,
                        type: file.file.type,
                        lastModifiedDate: file.file.lastModified,
                        file: file.file, // the file Blob
                    };
                    setFile(fileItem);
                } else {
                    fileItem = {
                        title: '',
                        description: '',
                        name: file.file.name,
                        path: file.file.path,
                        size: file.filesize,
                        type: file.file.type,
                        lastModifiedDate: file.file.lastModified,
                        file: file.file, // the file Blob
                    };
                    setFile(fileItem);
                    setError('Could not fetch data');
                }
            })
            .catch(err => setError(err));
    }, [file.file.name]);

    function getData() {
        return
            {liveFile ? (
                { name: liveFile.name, type: liveFile.type }
            ) : (
                { name: 'loading..' }
            )}
            };
    }

    return { getData };

};

export default withFirebase(File);

It cannot return that object that you want, as that will only get its value *later*, asynchronously. That is why the function currently returns an object with a *function*, which, when called, will either return the object you want, or an object that indicates "loading...". — trincot, Mar 25 '21 at 18:32
@trincot, thanks yea I been struggling with this hmm. Firebase work offline so even if Firebase have no live data it will return — Kid, Mar 25 '21 at 18:37
The `{liveFile` line **MUST** be in same line as the `return` statement, otherwise it will return `undefined`. See- https://stackoverflow.com/a/5107577/11642727 — Shivam Singla, Mar 25 '21 at 19:46

JP Basson · Answer 1 · 2021-03-25T19:56:32.803

0

So to confirm, the syntax for the ternary operator is saying

if liveFile exists/ is true then return
{ name: liveFile.name, type: liveFile.type } else return { name: 'loading..' }

codepen from below conversation showing ternary operator usage

https://codesandbox.io/s/gracious-raman-uv498

Further reading: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator#syntax

edited Mar 25 '21 at 19:56

answered Mar 25 '21 at 18:41

JP Basson

1
1

thanks I get [error](https://snipboard.io/NFwvug.jpg) as you see in the image – Kid Mar 25 '21 at 18:45
Hi, you can try see in this code pen how I setup an example tertiary that does similar to what you're trying to achieve I believe. I think the issue in your code is how you are formatting the brackets and return statements https://codesandbox.io/s/gracious-raman-uv498 Simply click the button a few times and few the console.log in the bottom right tab – JP Basson Mar 25 '21 at 19:00
Thanks nice codesandbox I must run some test I learn much now – Kid Mar 25 '21 at 19:11
@JPBasson why would the code not reach `return { getData }`? – Shivam Singla Mar 25 '21 at 19:43
1

@ShivamSingla the first return always runs, escaping the method https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return – JP Basson Mar 25 '21 at 19:52
1

@JPBasson `return { getData }` is out of the `getData` function which is a nested function inside `File` – Shivam Singla Mar 25 '21 at 19:55
1

You're right, I misread @ShivamSingla – JP Basson Mar 25 '21 at 19:56
Yea your right @ShivamSingla must redesign this – Kid Mar 26 '21 at 09:36

Ternary operation should return simple array

1 Answers1