Why does React tell me unexpected token "."

Question

I'm trying to display an json array on the screen but react tells me unexpected token "." I have searched around for 3 hours now but I can't figure out what is wrong or how to fix this. The other parts of the detail object all display correctly but for some reason the array just doesn't want to. I hope someone can help me with this problem.

the exact error I get is:

and the json in console log.

below is my code for the component.

function GeneDetail({ match }) {

    useEffect(() => {
        fetchDetails();
    }, []);

    const [detail, setDetail] = useState({})
    //const [alleles, setAlleles] = useState([])

    const fetchDetails = async () => {
        const fetchDetails = await fetch(
            '/api/get_genedetail?g='+match.params.genename+''
        );
        const detail = await fetchDetails.json()
        setDetail(detail)
        //setAlleles(detail.alleles)
    }
    console.log('alleles', detail.alleles)

    return(
    <div className="main-content">
        <Container maxWidth="lg">
            <div className="grid-container">
                <div className="grid-title">
                    <h2>Gene: <i>{detail.geneName}</i></h2>
                </div>
                <div className="grid-subtitle">
                    <h3>Type: {detail.segmentFullName}</h3>
                </div>
                <div className="grid-alleles">
                    test
                    {detail.alleles ?
                        {detail.alleles.map(function (allele, i) {
                            return <div key={i}>
                                <h5>{allele.Number}</h5>
                            </div>
                        })}
                     : (<p>"No alleles found."</p>)}
                </div>
            </div>
        </Container>
    </div>
    );
}

Answer 1

UpVote, if the solution works

function GeneDetail({ match }) {

    useEffect(() => {
        fetchDetails();
    }, []);

    const [detail, setDetail] = useState({})
    //const [alleles, setAlleles] = useState([])

    const fetchDetails = async () => {
        const fetchDetails = await fetch(
            '/api/get_genedetail?g='+match.params.genename+''
        );
        const detail = await fetchDetails.json()
        setAlleles(detail.alleles)
    }
    console.log('alleles', detail.alleles)

    return(
    <div className="main-content">
        <Container maxWidth="lg">
            <div className="grid-container">
                <div className="grid-title">
                    <h2>Gene: <i>{detail.geneName}</i></h2>
                </div>
                <div className="grid-subtitle">
                    <h3>Type: {detail.segmentFullName}</h3>
                </div>
                <div className="grid-alleles">
                    test
                    {alleles.length >= 0 ?
                        {alleles.map( (allele, i) => {
                            return <div key={i}>
                                <h5>{allele.Number}</h5>
                            </div>
                        })}
                     : (<p>"No alleles found."</p>)}
                </div>
            </div>
        </Container>
    </div>
    );
}

Answer 2

React errors can be confusing, the problem here is not that you have a dot there. Instead, you declare a variable expression in a variable expression, essentially like this:

{condition?{mappedData}:(alternative)}

You cannot declare an expression in an expression, you should've written it like this:

{detail.alleles ?
    detail.alleles.map(function (allele, i) {
         return <div key={i}>
             <h5>{allele.Number}</h5>
         </div>
    })
: (<p>No alleles found.</p>)}