How would go about to display items on same line in react?

Question

I am new to using react and i have started to write a program but i have hit a wall and don't know how to overcome it.

I am trying to display movie poster with their name and release date on the side of the poster. If you see the screenshot you can see thats not the case right now, the text is being placed below the poster.

How would i go about to make the poster and text side by side?

this is my render code if the problem is within there:

   return (
    <div className="App">
      <h1>Movie logger app</h1>
      <input value={word} onChange={handleChange} />
       <button onClick={getMovieName}>Find Movie</button>
        {data.map((item) => {
           return <div key={item.id}>
             <img src={item.poster} alt=""/> <h2>{item.title}</h2> <h4>{item.date}</h4>
             </div>;
        })}
    </div>
);

rateLess · Accepted Answer · 2020-12-31 19:10:15Z

1

This is more of a CSS question than a React question. You can try a flexbox layout, like so:

{data.map((item) => (
  <div key={item.id} style={{ display: "flex" }}>
    <img src={item.poster} alt="" />
    <div style={{ marginLeft: 20, display: "flex", flexDirection: "column" }}>
      <h2>{item.title}</h2>
      <h4>{item.date}</h4>
    </div>
  </div>
))}

answered Dec 31, 2020 at 19:10

rateLess

6975 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Óscar Contreras · Accepted Answer · 2020-12-31 19:06:09Z

0

You could use bootstrap grid system to give each element the half of the screen. https://getbootstrap.com/docs/4.0/layout/grid/

{data.map((item) => {
<div class="container">
  <div class="row">
    <div class="col-6">
      <img src={item.poster} alt=""/>
    </div>
    <div class="col-6">
       <h2>{item.title}</h2> <h4>{item.date}</h4>
    </div>
  </div>
</div>
})}

Another option could be to position your elements in a table that cover all the screen (not recommended )

answered Dec 31, 2020 at 19:06

Óscar Contreras

10513 bronze badges

Collectives™ on Stack Overflow

How would go about to display items on same line in react?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related