javascript - Ternary inside of map returning no results

Question

I'm trying to create a very basic filter system. I currently have the whole object displaying as a list which is great however when I try to copy the same component with a ternary statement inside of the map function it returns no results, it compiles with no errors but just does not display any items within the object.

I'm fairly new to this so please explain like I'm 5.

The filtered component:

function Torquay() {
  return (

    <div className="container">

      <div className="row">

        {spaces.map(item => {
          return item.town === 'Torquay' ?
            <div className="col-sm-12 col-md-6 col-lg-4">

              <div className="card mb-sm-5">
                  <span className="badge badge-light">{item.town}</span>
                  <h4 className="card-title">{item.name}</h4>

                  <div className="wifi">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-wifi"><path d="M5 12.55a11 11 0 0 1 14.08 0"></path><path d="M1.42 9a16 16 0 0 1 21.16 0"></path><path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path><line x1="12" y1="20" x2="12.01" y2="20"></line></svg>
                    <h6>{item.net}Mbps</h6>
                  </div>

                  <div className="amenities">
                    <ul>
                      <li>
                        {item.day === true ? <span role="img" aria-label="Open in day"></span> : null}
                      </li>
                      <li>
                        {item.night === true ? <span role="img" aria-label="Open at night"></span> : null}
                      </li>
                      <li>
                        {item.dog === true ? <span role="img" aria-label="Dog friendly"></span> : null}
                      </li>
                      <li>
                        {item.parking === true ? <span role="img" aria-label="Car parking"></span> : null}
                      </li>
                    </ul>
                  </div>

                  <img src={item.image} className="card-img-top" alt="..."/>
              </div>

            </div>
          : null}

        )}

      </div>

    </div>
  );
}

The object structure:

const spaces = [
  {
    name: 'WeSup Torquay',
    image: '/img/wesup/1.jpg',
    town: 'Torquay',
    net: 20,
    parking: true,
    dog: true,
    day: true,
    night: true,
  },

Thanks in advance!

标签： javascriptreactjs

Answer 1

你在三元操作之前有你的回报条件。或者在Like之后做

function Torquay() {
  return (

    <div className="container">

      <div className="row">

        {spaces.map(item => {
          return item.town === 'Torquay' && <div className="col-sm-12 col-md-6 col-lg-4">
              <div className="card mb-sm-5">
                  <span className="badge badge-light">{item.town}</span>
                  <h4 className="card-title">{item.name}</h4>

                  <div className="wifi">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-wifi"><path d="M5 12.55a11 11 0 0 1 14.08 0"></path><path d="M1.42 9a16 16 0 0 1 21.16 0"></path><path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path><line x1="12" y1="20" x2="12.01" y2="20"></line></svg>
                    <h6>{item.net}Mbps</h6>
                  </div>

                  <div className="amenities">
                    <ul>
                      <li>
                        {item.day === true ? <span role="img" aria-label="Open in day"></span> : null}
                      </li>
                      <li>
                        {item.night === true ? <span role="img" aria-label="Open at night"></span> : null}
                      </li>
                      <li>
                        {item.dog === true ? <span role="img" aria-label="Dog friendly"></span> : null}
                      </li>
                      <li>
                        {item.parking === true ? <span role="img" aria-label="Car parking"></span> : null}
                      </li>
                    </ul>
                  </div>

                  <img src={item.image} className="card-img-top" alt="..."/>
              </div>

            </div>
          }
        )}

      </div>

    </div>
  );
}