at the return trying to use ternary expression inside of react function component to I'm trying return a div but I get an errors on the else ":" expression which says that it expects ")" "," variable declaration and declaration or statement

import React, {useState, useEffect} from 'react';

export const Cards = () => {
const Url = 'https://api.spotify.com/v1/browse/new-releases';
const [data, setData] = useState([])

const getData = async() => {
  let token = window.localStorage.getItem('token')
  const response = await fetch(Url, 
    {headers: 
      {Authorization: `Bearer ${token}`},
      'Content-type': 'application/json'
    });
    
 const data = await response.json();
 setData(data)
 console.log(data.albums.items[0].name)
 console.log(data.albums.items)
}  

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

// => the errors are in this block of code
return (
  (data && data.albums.items) 
    ? data.albums.items.map((item) => {
        const {artists, id, images, name} = item;
        return (
    <div className='card-content' style={{width: '13.5rem', height:'17rem', backgroundColor: '#242424', margin:'auto 0rem', borderRadius:'0.75rem'}}>
   <div key={id} >
       <img src={images[0].url}/>
   </div>
      <h4>{name}</h4>
      <p>{`by ${artists.name}`}</p> 
      </div>
    : <p>Unreachable</p> );
       
}))
// <= the errors are in this block of code
}

CodePudding user response：

there is problem where you place

: <p>Unreachable</p>

the code should be like this

import React, {useState, useEffect} from 'react';

export const Cards = () => {
const Url = 'https://api.spotify.com/v1/browse/new-releases';
const [data, setData] = useState([])

const getData = async() => {
  let token = window.localStorage.getItem('token')
  const response = await fetch(Url, 
    {headers: 
      {Authorization: `Bearer ${token}`},
      'Content-type': 'application/json'
    });
    
 const data = await response.json();
 setData(data)
 console.log(data.albums.items[0].name)
 console.log(data.albums.items)
}  

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

// => the errors are in this block of code
return (
  (data && data.albums.items) 
    ? data.albums.items.map((item) => {
        const {artists, id, images, name} = item;
        return (
    <div className='card-content' style={{width: '13.5rem', height:'17rem', backgroundColor: '#242424', margin:'auto 0rem', borderRadius:'0.75rem'}}>
   <div key={id} >
       <img src={images[0].url}/>
   </div>
      <h4>{name}</h4>
      <p>{`by ${artists.name}`}</p> 
      </div>)
     
       
}): <p>Unreachable</p>)
// <= the errors are in this block of code
}

CodePudding user response：

You have syntax error in your code. That piece:

: <p>Unreachable</p>

is inside map callback which is not correct. Try to always keep an indent and properly format your code to avoid such errors in future.

Here is your code, but properly formatted.

    return (
      (data && data.albums.items)
        ? data.albums.items.map((item) => {
          const {
            artists, id, images, name,
          } = item;
          return (
            <div
              className="card-content"
              style={{
                width: '13.5rem', height: '17rem', backgroundColor: '#242424', margin: 'auto 0rem', borderRadius: '0.75rem',
              }}
            >
              <div key={id}>
                <img src={images[0].url} />
              </div>
              <h4>{name}</h4>
              <p>{`by ${artists.name}`}</p>
            </div>
          );
        })
        : <p>Unreachable</p>
    );

CodePudding user response：

According to @jihad.khorfan answer

Here is the wrong & working code with prettify

Wrong Code

  // => the errors are in this block of code
  return data && data.albums.items ? (
    data.albums.items.map((item) => {
      const { artists, id, images, name } = item;
      return (
        <div
          className='card-content'
          style={{
            width: "13.5rem",
            height: "17rem",
            backgroundColor: "#242424",
            margin: "auto 0rem",
            borderRadius: "0.75rem",
          }}
        >
          <div key={id}>
            <img src={images[0].url} />
          </div>
          <h4>{name}</h4>
          <p>{`by ${artists.name}`}</p>
        </div>
      : <p>Unreachable</p>

  }))

  // <= the errors are in this block of code

Working Code

  // => the errors are in this block of code
  return data && data.albums.items ? (
    data.albums.items.map((item) => {
      const { artists, id, images, name } = item;
      return (
        <div
          className='card-content'
          style={{
            width: "13.5rem",
            height: "17rem",
            backgroundColor: "#242424",
            margin: "auto 0rem",
            borderRadius: "0.75rem",
          }}
        >
          <div key={id}>
            <img src={images[0].url} />
          </div>
          <h4>{name}</h4>
          <p>{`by ${artists.name}`}</p>
        </div>
      );
    })
  ) : (
    <p>Unreachable</p>
  );
  // <= the errors are in this block of code

CodePudding user response：

You should put your ternary code inside curly braces e.g.

{ showMe ? <span>Me</span> : <span>You</span>}