When everything works fine, error occurs that says: The `style` prop expects a mapping from style properties to values (Reactjs)

Question

function WelcomePage() {
 
***
  const history = useHistory();

  useEffect(() => {
    if(localStorage.getItem('currentUser')){
      history.push("/mainPage")
    }
  }, [])

  function loginHandler(){
      const ownerService = new OwnerService()
      const vetService = new VetService()

      if(selectedUserType==0){
          ownerService.getByUsername(username).then(response=>{
            const owner = response.data.data
            if(owner !=null ){
              if(owner.password==password){
                console.log(owner)
                dispatch(setCurrentUser(owner))
                toast("başarıyla giriş yaptın")
                localStorage.setItem('currentUser', JSON.stringify(owner))
                history.push("/mainpage")                //error says that there is a problem here
              }
              else{
                toast("böyle bir kullanıcı bulunamadı")
              }
            }else{
              toast("böyle bir kullanıcı bulunamadı")
            }
          })
      }
      
      if(selectedUserType==1){
        vetService.getByUsername(username).then(response=>{
          const vet = response.data.data
          if(vet !=null ){
            if(vet.password==password){
              dispatch(setCurrentUser(vet))
              toast("başarıyla giriş yaptın")
              localStorage.setItem('currentUser', JSON.stringify(vet))
              history.push("/mainpage")
            }
            else{
              toast("böyle bir kullanıcı bulunamadı")
            }
          }else{
            toast("böyle bir kullanıcı bulunamadı")
          }
        })
      }
  }

  return (
    <div>
      ***


    </div>
  );
}

export default WelcomePage;

Error Message:

Unhandled Rejection (Error): The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.


(anonymous function)
C:/Users/MithatAkbulut/Documents/GitHub/modules/Router.js:34
  31 | if (!props.staticContext) {
  32 |   this.unlisten = props.history.listen(location => {
  33 |     if (this._isMounted) {
> 34 |       this.setState({ location });
     | ^  35 |     } else {
  36 |       this._pendingLocation = location;
  37 |     }
View compiled
▶ 7 stack frames were collapsed.
(anonymous function)
C:/Users/MithatAkbulut/Documents/GitHub/vetwebapp-react/src/pages/WelcomePage.jsx:56
  53 |   dispatch(setCurrentUser(owner))
  54 |   toast("başarıyla giriş yaptın")
  55 |   localStorage.setItem('currentUser', JSON.stringify(owner))
> 56 |   history.push("/mainpage")
     | ^  57 | }
  58 | else{
  59 |   toast("böyle bir kullanıcı bulunamadı")
View compiled

It seems like the problem is from the useHistory hook but application was working previously. I had some problems about localStorage and tried to delete all the things about localStorage to retrieve, but not worked. Errors message says that the problem is about styling, but I know that the stylings are fine.

Edit: The problem was using a 'style={{}}' with '&&' but not with '||'. While the 'true' one works, other case application doesn't know what it will do and throw error.

Not use like this:

<button style={true&&{background:"red"}} >Button example</button>

This using is more issueless than the one above:

<button style={true?{background:"red"}:{background:"green"}} >Button example</button>

https://stackoverflow.com/questions/43366026/react-inline-style-style-prop-expects-a-mapping-from-style-properties-to-value?rq=1 It says `style` singular. Should it be`styles`? Might not be on the welcome page but whatever page is `/mainpage` — DemiPixel, Oct 07 '21 at 16:49

score 0 · Answer 1 · answered Oct 07 '21 at 16:54

Unless I'm misunderstanding the error, this is talking about the style prop on an HTML element:

const MyComponent = ()=>{

    return (
        <div
            style={{fontSize: '25px'}} // <--this is what is required
            style={'font-size: 25px'}  // <--but something like this is what is causing the error
        >
            Hello, World!
        </div>
    );

};

Take a look at all your components and their values and make sure they are all objects containing CSS key/value pairs.

The line number of the error can't always be trusted so look around.

When everything works fine, error occurs that says: The `style` prop expects a mapping from style properties to values (Reactjs)

1 Answers1