CODEWITHSUNDEEP
cssreactjs
devBsc
devBsc

Reputation: 31

React - How to align text and img in same line

I'd like to align some text with a logo on the same line:

                    <div id="container" style="white-space:nowrap">
                        <div id="image" style="display:inline;">
                            <Link href="" target="_blank">
                                <img
                                    src={img}
                                    loading="lazy"
                                    width="40px"
                                    height="40px"
                                    alt=""
                                />
                            </Link>
                        </div>
                        <div id="texts" style="display:inline; white-space:nowrap;">
                            <strong> 75 </strong>
                        </div>
                    </div>

But when I try to run it, I receive these errors:

  Line 61:41:  Style prop value must be an object                                                                         react/style-prop-object
  Line 62:41:  Style prop value must be an object                                                                         react/style-prop-object
  Line 73:41:  Style prop value must be an object

Upvotes: 0

Views: 5395

Answers (3)

WyattH7
WyattH7

Reputation: 215

Before we can answer the question you ask in the title of this post, you have to fix your inline styles, hence the error you receive from React. The answer to your question using CSS will be at the bottom of the post.

When using inline styles in React, you will need to create an object. An object is the use of key, value pairs. So, using the code given in your example, style="display:inline;" is not an object, and thus will not work as you have seen. To make this inline style work, you will need to do one of the following.

  1. Create an object within the JSX

This method can get messy, so if you are planning to write all your styles as inline styles, I suggest using method 2.

To do this, you can follow @RiTeSh 's example. You will need to create an object and pass that to the element's style prop, WHICH CANNOT BE A STRING, as you can see from the errors you are getting. You can do the following:

// Notice how the value is the only string in the object.
style={{
      whiteSpace:'nowrap',
      display:'inline',
      
    }}

And to see what this would look like when used in an element:

<div style={{whiteSpace:'nowrap',  display:'inline'}} >
 Hello World
</div>
  1. Store the styles in a variable

Compared to method 1, this is a much cleaner way to add inline styles as it doesn't create a jumbled mess in your render() function.

Before you reach the render() function, create an object and store it in a variable like the one below.

const styleObject = {
      whiteSpace:'nowrap',
      display:'inline',
      
    };

return (
 // Your JSX here
);

And when you apply the styleObject to the JSX element, it should look like the following:

return(
 <div style={styleObject} >
  Hello World
 </div>
);

Make img and text appear on the same line

This is quite a simple answer if you use the display: flex property on the wrapper element, which, in your case, is the div with an id of container. Here is a simple read about flexbox from W3 Schools

With inline styles on the container element:

style={{display: 'flex'}}

With CSS:

#container {
  display: flex;
}

Upvotes: 1

Rashed Rahat
Rashed Rahat

Reputation: 2479

style prop takes an object.

Full code:

<div id="container" style={{ whiteSpace: "nowrap" }}>
      <div id="image" style={{ display: "inline" }}>
        <Link href="" target="_blank">
          <img src={img} loading="lazy" style={{ width: "40px", height: "40px" }} alt="" />
        </Link>
      </div>
      <div id="texts" style={{ display: "inline", whiteSpace: "nowrap" }}>
        <strong> 75 </strong>
      </div>
</div>

CodeSandbox Demo

Upvotes: 0

RiTeSh
RiTeSh

Reputation: 521

In react you need to use in style in object,

https://reactjs.org/docs/dom-elements.html#style

style={{
      whiteSpace:'nowrap',
      display:'inline',
      
    }}

Upvotes: 1

Related Questions