Implementing React inline styles by directly incorporating brackets into the HTML rendering

I'm working on a project in React using create-react-app and trying to apply an inline style. Based on my research, the following line of code should work fine:

<div id="root" style={{ height: 'auto' }}></div>

However, when I run yarn start, the HTML output is not as expected:

https://i.sstatic.net/GljtI.png

When I check the "edit html" option in Chrome, the code looks like this:

<div id="root" style="{{" height:="" 'auto'="" }}="">

I'm wondering why my {{ }} are not functioning properly. Did I overlook something? Do I need to make additional configurations in webpack or babel for create-react-app?

It's worth noting that I have used eject but have not made any changes to default settings that could impact this issue, as far as I am aware.

cssreactjs

Answer №1

You seem to be mixing up the style attribute in JSX with the style attribute in HTML.

// In HTML @ index.html
<div style="background: blue; height: 50px; width: 50px;"/>

// In JSX @ Component.js
<div style={{ background: 'blue', height: 50, width: 50 }} />

// Transpiled as
React.createElement("div", {
  style: {
    background: 'blue',
    height: 50,
    width: 50
  }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discover the secrets of extracting the ID from a MenuItem within a Menu

Table Ui with menu Struggling with fetching the correct user ID in the edit button The edit button for all users is only displaying the last user's ID If the edit button is not nested inside the Menu, it works fine. However, within the Menu, it onl ...

javascripthtmlreactjsmaterial-uifetch

What is the best way to create a Dialog with a see-through body in Android?

Is there a way to hide the background dialog box without hiding the inner content? Simply setting opacity to 0 won't work because it will also hide the children nodes: <Dialog title="Dialog With Actions" actions={actions} modal={no} ...

reactjsmaterial-ui

Add value to input only if there is data available using a React functional component

Featuring an input field as part of a questionnaire with next and back buttons: https://i.sstatic.net/94zbN.png <input id="answer"/> Capturing the user's input value when they click on the next or back buttons: const [quizIndex, set ...

reactjsreact-hooks

Tips on increasing video size upon visiting a website. HTML, JavaScript, and potentially jQuery can be used for video animation

Is there a way to create a video pop-up in the same window when visiting a website? I want the video to increase in height from 0 to a specific height and move slightly upwards. Are there JavaScript or jQuery functions that can achieve this effect? I wou ...

javascriptjqueryhtmlcss

Each element is being adorned with the Ajax success function class

Currently, I am in the process of creating an Ajax function to integrate search features into my project. The search function itself is functioning properly; however, within the success: function, I am encountering an issue. Specifically, I am attempting t ...

javascripthtmljquerycss

Is there a way to clear the form field automatically after submitting it?

How do I clear the 'city' field when clicking the 'Get Weather' button? Also, why do I need to click the button twice to get the correct 'time'? View Image Code Link: Project Link ...

reactjs

What is the best way to showcase the chosen items from a treeview in ReactJS?

I'm struggling to figure out how to showcase the selected elements from my treeview. Any ideas or tips? The main purpose of this treeview is to filter data for export purposes. You can find the original code here. import React, {useEffect, useState} ...

javascriptreactjsmaterial-uitreeview

Internet Explorer 11 fails to interpret the attribute attr.xlink:href

I am a beginner in Angular 2 and I'm working on creating an icon component. The code I have below works perfectly in Chrome and Firefox, but unfortunately, it's not functioning in Internet Explorer 11. Here is what my component looks like: @Com ...

csshtmlsvgangular

the JavaScript anchor feature is malfunctioning

Steps to Play Back: To start, in the header section, select any of the links with anchors: ##bankaccount #pack #platform #acq ##scorecard ##intrade #form Next, scroll up to the top of the page Then, reload the page Actual Outcome: Upon reloading a page w ...

javascriptreactjs

The standard jQuery Mobile CSS styling does not seem to be working across various browsers, extensive testing has been conducted

I'm currently experimenting with jQuery Mobile to enhance my skills, but I'm facing issues with applying the basic CSS styling. I have included the css link from the jQuery Mobile website and ensured that I am connected to the internet. However, ...

jqueryhtmlcssjquery-mobile

Handling Marker Click Events in Google Maps with React

I followed the example provided in the react-google-maps documentation to create a clustered map with markers. Now, I want to enhance the functionality by adding a click event to the markers that redirects to a specific URL retrieved from my API using wind ...

reactjsgoogle-maps

Need to update React textarea with value that is currently set as readonly

In my React application, I have a textarea that is populated with a specific value. My goal is to allow this textarea to be updated and then submit the form in order to update the corresponding row in the database. <textarea id="description" className= ...

javascriptreactjstextarearedux

Implementing a GIF loader in your webpack configuration for a Typescript/React/Next.js application

Upon inserting a .gif file in my Typescript React app, an error message has surfaced. ./src/gif/moving.gif 1:6 Module parse failed: Unexpected token (1:6) You may need an appropriate loader to handle this file type, currently no loaders are configured to p ...

reactjstypescriptwebwebpacknext.js

Looking for assistance in minimizing the gap between the banner and content on my Weebly website

Currently, I am utilizing Weebly templates and working with the CSS files for my website located at www.zxentest.weebly.com. I am seeking assistance in reducing the space between the yellow banner and the faint line on either side, as well as decreasing t ...

htmlcssreduceweebly

Using CSS3 to style the first letter of a text, align it vertically as super, and adjusting

I am trying to create a basic list without any images included. I would like the first letter of the last item in the list to be styled with "vertical-align: super;", however, this is causing an increase in the height of the paragraph. #third::first-let ...

htmlcss

Challenges faced while deploying a TypeScript and React application using Express on Heroku

I encountered some errors when attempting to host my application: 2018-07-03T23:32:25.175363+00:00 heroku[web.1]: Starting process with command `npm start` 2018-07-03T23:32:28.093779+00:00 heroku[web.1]: State changed from starting to crashed 2018-07-03T2 ...

node.jsreactjsexpressherokuwebpack

Click Function for Modifying the Content of a Popup Window

I'm a beginner in JavaScript and I need help figuring out how to achieve the following task. Essentially, my goal is to have lines of code like this: <a onclick="JavascriptFunction(0000000)"><img src="image1.png"></a> The number w ...

javascripthtmlcsspopup

CSS3 Animation: Facing issue with forwards fill behavior in Safari when using position and display properties

After creating a CSS3 animation to fade out an element by adjusting its opacity from 1 to 0 and changing the position to absolute and display to none in the last frames, I encountered an issue. In Safari, only the opacity is maintained while the position a ...

javascriptjquerycsscss-animations

The Material Icons font family must be loaded via Exponent as it is not a default system font

Currently, I am utilizing the Icon component from react-native-vector icons by importing it with this code: import Icon from 'react-native-vector-icons/MaterialIcons'; It appears that the connection is established correctly. The snippet of cod ...

reactjsreact-nativematerial-uiexponentexpo

Troubleshooting HTML/CSS and JavaScript Issues with Dropdown Menus

I'm having trouble getting my dropdown menu to work properly and I can't figure out why. The JavaScript code should toggle a class that hides the language options and slides up the other tabs like "Contact". However, when I click the button, noth ...

javascripthtmlcss