¿Por qué no reacciona dime símbolo inesperado ""

Moopsish:

Estoy tratando de mostrar una matriz JSON en la pantalla pero reaccionar me dice símbolo inesperado "" He buscado alrededor de 3 horas ahora, pero no puedo averiguar lo que está mal o cómo solucionar este problema. Las otras partes del objeto detallar todas pantalla correctamente, pero por alguna razón la matriz simplemente no quiere. Espero que alguien me pueda ayudar con este problema.

el error exacto que recibo es:

y el JSON en la consola de registro.

a continuación es mi código para el componente.

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>
    );
}

CerebralFart:

Reaccionar errores pueden ser confusos, el problema aquí no es que tiene un punto allí. En su lugar, se declara una expresión variable en una expresión variable, esencialmente como esto:

{condition?{mappedData}:(alternative)}

No se puede declarar una expresión en una expresión, que debería haber escrito así:

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