Problem facing while passing state to function based component

Question

I want to pass my state from a class based component to function based component. I am following this, but it cannot solve my error. How can I access the properties? What mistake am I making?

class component:

 const { userInfo } = this.state;
 <UserMenu {...userInfo}/>

Console error:

Failed to compile
./src/app/fuse-layouts/shared-components/UserMenu.js
  Line 18:32:  Expected an assignment or function call and instead saw an expression  no-unused-expressions

Properties I want to access:

address: ""
designation: (2) ["X", "Y"]
email: ""
id: "ABC"
name: "WER"
phone_number: "3456"
qualification: ""
role: "admin"
secondary_phone_number: ""

Update:

The function component is :

function UserMenu({id}) {
    const dispatch = useDispatch();

    const [userMenu, setUserMenu] = useState(null);

    const userMenuClick = event => {
        setUserMenu(event.currentTarget);
    };

    const userMenuClose = () => {
        setUserMenu(null);
    };

    return (
        <>
           <Popover>
             ....

            </Popover>
        </>
    );
}

export default UserMenu;

I am getting this error : Expected an assignment or function call and instead saw an expression

SOLVE: I followed this

`const user = ({userInfo}) => {userInfo}` what are you trying to do here? — Yousaf, Jun 09 '20 at 12:55
Somehow I didn't note that you updated your answer. I updated the code accrodingly. And the error was producing due to a missing parenthesis. Also, whenever i was getting `expected-an-assignment-or-function-call-and-instead-saw-an-expression`, doing this somehow resolved the error. That's why I did it despite of knowing what I was doing. — Proteeti Prova, Jun 09 '20 at 13:03

Yousaf · Accepted Answer · 2020-06-09T12:46:03.927

2

You are not using the spread operator correctly

Change

<UserMenu {...{userInfo}}/>

to

<UserMenu { ...userInfo }/>

In child component, you can access all the properties of userInfo object directly on the props object

function UserMenu({ address, email, id }) {
    ....
}

Alternative approach to pass props from parent to child component is

<UserMenu userInfo={ userInfo } />

If you use second approach, then props object will have a property named userInfo on it containing all the user data you passed from parent component

function UserMenu({ userInfo }) {
    ....
}

edited Jun 09 '20 at 12:46

answered Jun 09 '20 at 12:33

Yousaf

27,861
6
44
69

If I change it this way, my VScode says it expects like they way I put the spread in my question. Console error says `Parsing error, Unexpected Token expected "..." ` – Proteeti Prova Jun 09 '20 at 12:37
Now it is throwing `React: Expected an assignment or function call and instead saw an expression` even though my syntax is alright – Proteeti Prova Jun 09 '20 at 12:45
In case of the alternative (2nd) approach, How can I access the values? I am trying `userInfo.name` but it is showing me nothing. – Proteeti Prova Jun 09 '20 at 13:53
try to log `userInfo` on the console and see what you get. Also make sure that you are using the same name as passed from the parent component – Yousaf Jun 09 '20 at 13:55
userInfo gives me all the properties, but whenever I try to access a single property like userInfo.name, it is giving me null – Proteeti Prova Jun 09 '20 at 13:57
I can do the first way and can access all the values, but I need to pass the userInfo to a child component used in `UserMenu` – Proteeti Prova Jun 09 '20 at 13:58
how are you accessing the `name` property? there must be a problem somewhere else in your code because props are being passed correctly from parent component and you have verified that by logging `userInfo` object on the console – Yousaf Jun 09 '20 at 14:00
I am accessing name by logging `userInfo.name`, which results `Typeerror: Cannot read property of null`. If I simple remove the `.name`, it shows all the properties – Proteeti Prova Jun 09 '20 at 14:03
can you create a simple codesandbox demo of your problem and share the link? – Yousaf Jun 09 '20 at 14:05
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/215600/discussion-between-proteeti-prova-and-yousaf). – Proteeti Prova Jun 09 '20 at 15:19

Problem facing while passing state to function based component

1 Answers1