CODEWITHSUNDEEP
reactjsmaterial-ui
JayJayAbrams
JayJayAbrams

Reputation: 195

Element props in jsx

When describing certain element in render() I can define some props manually. For example

<ListItemText
    primary="Single-line item"
    secondary="Secondary text"
    className={classes.listItem}
    primaryTypographyProps={{ textOverflow: 'ellipsis', overflow: 'hidden', display:"inline" }}
    secondaryTypographyProps={{ textOverflow: 'ellipsis', overflow: 'hidden', display:"inline" }}
/>

I can define some properties in JSX within makeStyles. Like this:

listItem: {
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis'
}

But how to define all props of abovementioned **ListItemText**?

Something like this gives me errors. I cant put object inside object.

listItem: {
    whiteSpace: 'nowrap',
    primaryTypographyProps={{ textOverflow: 'ellipsis', overflow: 'hidden', display:"inline" }}
}

and this is not working at all. (not in className nor in styles)

listItem: {
    primary:"Single-line item"
},

My questions are 1. how to send these properties in jsx? 2. how to put object inside object in jsx?

Upvotes: 0

Views: 428

Answers (1)

Sandy
Sandy

Reputation: 11687

1. How to send these properties in jsx?

Not sure what really this means. But if you just wanted to create an object and pass it as props then you can use destructuring.

const listItemProps = {
    whiteSpace: 'nowrap',
    primaryTypographyProps: { textOverflow: 'ellipsis', overflow: 'hidden', display:"inline" }
};

<ListItemText {...listItemProps} />

If not this, you need to clarify more on how to send these properties in JSX statement.

2. How to put object inside object in jsx?

It doesn't make any sense. JavaScript objects are comprised of key-value pairs. No matter you write it in JSX or any other way.

{{ textOverflow: 'ellipsis', overflow: 'hidden', display:"inline" }} is not object inside object. It is just syntax in JSS to pass object as props for something like class/style attribute.

This is actually just an object actually. In react, expressions are written in {} when passing attributes other than text. This JSS syntax makes it possible for user to do that. Same concept is used in below as well.

<ListItemText max={1} checkByDefault={true} />

Above is also JSS syntax. Above 1 and true are passed as props. In your example you passed object as props. It was not object inside object.

Hope it helps.

Upvotes: 1

Related Questions