The style prop expects a mapping from style properties to values, not a string

The React error "The style prop expects a mapping from style properties to values, not a string" occurs when we pass a CSS string to the style attribute of an element in React instead of a JavaScript object.

The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string in JSX. If we pass a value other than a javascript object or undefined, React will throw an exception. 

Let us take the below example code that throws the error.

// This code throws an error
export default function App() {
  return (
  	<div>
    	<h1 style="padding-right:2rem">Hi there!</h1>    	
    </div>
  );
}

In the above code, the issue is coming from the style attribute  style="padding-right:2rem". Here we are passing CSS as a string(like inline style in HTML) instead of a javascript object which caused the error.

To solve this error, we have to use a javascript object with camelCased properties, like style={{ paddingRight: '2rem' }}.

We can pass CSS style strings as a javascript object with camelCased properties as given below.

export default function App() {
  return (
  	<div>
    	<h1 style={{ paddingRight:'2rem'}} >Hi there!</h1>    	
    </div>
  );
}

In the javascript object {{ paddingRight:'2rem'}}, the outer curly braces evaluate an expression, and the inner curly braces define it as an object containing property names and values. Since outer braces evaluate an expression, we are allowed to implement any javascript logic inside the style prop.

We can pass multiple styles into style attributes like {{ paddingRight:'2rem', margin:'1rem'}}.

1.  We can use javascript variables inside the style prop.

export default function App() {
	const a = 2;
  	return (
  		<div>
    		<h1 style={{ paddingRight:a+'rem'}} >Hi there!</h1>    	
    	</div>
  	);
}

    We have given dynamic styles with a variable a in the above code.

2. We can extract all properties and values of an object into a variable.

export default function App() {
	const styleObj = { paddingRight:'2rem'};
  	return (
  		<div>
    		<h1 style={styleObj} >Hi there!</h1>    	
    	</div>
  	);
}

In most cases, className should be used to reference classes defined in an external CSS stylesheet. The style attribute is most often used in React applications to add dynamically-computed styles at render time. The below example shows how to use an external CSS stylesheet and className in the react component.

app.css

.custom-h1{
	padding-right:2rem;
}

App.js

import './App.css';

export default function App() {
  	return (
  		<div>
    		<h1 className="custom-h1" >Hi there!</h1>    	
    	</div>
  	);
}

We imported styles from an external stylesheet as import './App.css'; and used them in the component. We are using className to specify CSS class names instead of class which is a reserved word in JavaScript for declaring JavaScript classes.

For more details read React Dom Element styling.

Conclusion

The React error "The style prop expects a mapping from style properties to values, not a string" happens when we pass a CSS string instead of a JavaScript object to the style attribute of an element. In JSX, the style attribute accepts a javascript object with camelCased properties.

Related Blogs

Can't Perform a React State Update on an Unmounted Component

Can't Perform a React State Update on an Unmounted Component

React Warning “Can't perform a react state update on an unmounted component” is caused when we try to update the state after the component was unmounted. Explains how to fix it.

Each child in a list should have a unique key prop

Each child in a list should have a unique key prop

Solve Warning: Each child in a list should have a unique ”key" prop in React by setting the id property as a unique key or by auto-assigning unique keys.

React Hook is Called Conditionally

React Hook is Called Conditionally

Error: "React Hook is called conditionally. React Hooks must be called in the exact same order in every component render" occurs when hooks are invoked conditionally or after a return of a value.

Too many re-renders. React limits the number of renders to prevent an infinite loop

Too many re-renders. React limits the number of renders to prevent an infinite loop

The React error "Too many re-renders. React limits the number of renders to prevent an infinite loop" happens when you have reached an infinite render loop.

Adjacent JSX elements must be wrapped in an enclosing tag

Adjacent JSX elements must be wrapped in an enclosing tag

The "Adjacent JSX elements must be wrapped in an enclosing tag" error can be solved by wrapping the multiple elements in a parent div or in a react fragment

The tag is unrecognized in this browser

Warning: The tag is unrecognized in this browser

Warning "The tag is unrecognized in this browser" occurs when the tag doesn't exist in the browser or when we render a component starting with a lowercase letter.

Pass event and parameter onClick in React

How to pass event and parameter onClick in React

We set the inline arrow function (event) => clickHandler(event, "Hello World!") as props to the onClick event handler in the button. The arrow function takes the event as an argument and calls the clickHandler function.

Create a Back button with React Router

Create a Back button with React Router

To create a back button with React Router use useNavigate() hook. Call navigate function eg. navigate(-1); inside the onClick function of the back button.

Call multiple functions onClick in React

Call multiple functions onClick in React

To call multiple functions onClick in React, pass an event handler function into the onClick prop of the element that can call as many other functions as necessary.