CODEWITHSUNDEEP
cssreactjsflexbox
Alex Smith
Alex Smith

Reputation: 124

Why would flex-direction not work work the way I have it set up? REACT js

its simple. theres a heading, a search bar, and some rendered content from an API. pretty basic stuff. and even more basic, I call a API to display a bunch of movie images below the search bar. ever simplier right? search.map starts the mapping process and below that I have an ul with some li items being that are going to be displayed. BUt they only go down...it feels impossible to get them going side to side. Ive tried putting display flex and flex-direction row on diffrent divs, ive tried putting !important after the elements css are defined. nothing. any ideas on whats going on? heres the code..

.form-div {
  margin-bottom: 1rem;
}

.container {
  align-items: center;
}

.searchbar {
  width: 760px;
  font-size: 1 rem;
  font-weight: 400;
  line-height: 1.5;
  outline: none;
  background-color: blanchedalmond;
  color: grey;
  border: 1x solid blueviolet;
  border-radius: 0.25rem;
  padding: 0.375rem 0.75rem;
}

.searchBtn {
  color: white;
  background-color: black;
  font-size: 1rem;
  outline: none;
  min-height: 36px;
  font-weight: 400px;
  text-align: center;
  cursor: pointer;
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
  border-radius: 0.25rem;
}

.img-container h1 {
  padding: 10px;
}

.image-element {
  width: 250px;
  height: 320px;
  padding-left: 5px;
  padding-right: 5px;
}

.data-container {
  padding: 5px;
}

.flexed {
  display: flex;
  flex-direction: row;
  list-style: none;
}

import "./SearchBar.css";
import React, { useState } from "react";

const SearchBar = () => {
  const [search, setSearch] = useState([]);
  const [input, setInput] = useState("");

  const onUserInput = ({ target }) => {
    setInput(target.value);
  };

  const SearchApi = (event) => {
    const aUrl = "";
    const newUrl = aUrl + "&query=" + input;

    event.preventDefault();

    fetch(newUrl)
      .then((response) => response.json())
      .then((data) => {
        setSearch(data.results);
      })
      .catch((error) => {
        console.log("Error!! Data interupted!:", error);
      });
  };

  return (
    <div>
      <div className="container">
        <h1>Movie Search Extravaganza!</h1>

        <form>
          <input
            value={input}
            onChange={onUserInput}
            type="text"
            className="searchbar"
            aria-label="searchbar"
            placeholder="search"
          ></input>
          <button
            type="submit"
            onClick={SearchApi}
            aria-label="searchbutton"
            className="searchBtn"
          >
            Movie Express Search
          </button>
        </form>
      </div>

      {search.map((item) => (
        <ul className="flexed">
          <li key={item.id}>
            <img
              className="image-element"
              alt="poster"
              src={`https://image.tmdb.org/t/p/w500${item.poster_path}`}
            ></img>
          </li>
        </ul>
      ))}
    </div>
  );
};

Upvotes: 4

Views: 5051

Answers (1)

Vaibhav Vishal
Vaibhav Vishal

Reputation: 7138

The parent element needs to have display: flex. A flex element displays it's children in a row.

What you need to do is:

<ul className="flexed">
  {search.map((item) => (
    <li key={item.id}>
      <img className="image-element" alt="poster" src={item.src}></img>
    </li>
  ))}
</ul>

What you are doing instead is that you had ul too inside the map, which was causing to have several flex ul inside a div. div has display: block by default, hence items were showing below each other. By wrapping all your lis inside a single ul will get you the desired effect.

Upvotes: 7

Related Questions