What is 'generate' in this context?
What does the generate() method mean in the following context and how does it work? I have never seen this before. Is this a method of the List component, or does it belong to React.js or JSX or does it belong to Javascript or does it belong to something else? I haven't been able to locate any documentation for it.
The demo.js file in this codesandbox contains the following:
https://codesandbox.io/s/ppmxj46w8x
demo.js, beginning on line 115
<Grid item xs={12} md={6}>
<Typography variant="h6" className={classes.title}>
Avatar with text
</Typography>
<div className={classes.demo}>
<List dense={dense}>
{generate( // <-- what is this?
<ListItem>
<ListItemAvatar>
<Avatar>
<FolderIcon />
</Avatar>
</ListItemAvatar>
<ListItemText
primary="Single-line item"
secondary={secondary ? 'Secondary text' : null}
/>
</ListItem>,
)}
</List>
</div>
</Grid>
Here are the docs the code sandbox comes from.
Could someone please explain and point me to some documentation for this generate() method.
javascript reactjs
asked Nov 19 '18 at 17:41
MowzerMowzer
5,387640105
add a comment |
What does the generate() method mean in the following context and how does it work? I have never seen this before. Is this a method of the List component, or does it belong to React.js or JSX or does it belong to Javascript or does it belong to something else? I haven't been able to locate any documentation for it.
The demo.js file in this codesandbox contains the following:
https://codesandbox.io/s/ppmxj46w8x
demo.js, beginning on line 115
<Grid item xs={12} md={6}>
<Typography variant="h6" className={classes.title}>
Avatar with text
</Typography>
<div className={classes.demo}>
<List dense={dense}>
{generate( // <-- what is this?
<ListItem>
<ListItemAvatar>
<Avatar>
<FolderIcon />
</Avatar>
</ListItemAvatar>
<ListItemText
primary="Single-line item"
secondary={secondary ? 'Secondary text' : null}
/>
</ListItem>,
)}
</List>
</div>
</Grid>
Here are the docs the code sandbox comes from.
Could someone please explain and point me to some documentation for this generate() method.
javascript reactjs
asked Nov 19 '18 at 17:41
MowzerMowzer
5,387640105
If I understood correct, it has no direct relation to React. It's just a custom defined somewhere function, expecting React element as argument.
– hindmost
Nov 19 '18 at 17:49
Look at the top of thedemo.jsfile (Line 33). It is defined there. It is just a small helper method to generate multiple elements for this specific example. Not part ofreactormaterial-uiin any form.
– trixn
Nov 19 '18 at 17:52
add a comment |
What does the generate() method mean in the following context and how does it work? I have never seen this before. Is this a method of the List component, or does it belong to React.js or JSX or does it belong to Javascript or does it belong to something else? I haven't been able to locate any documentation for it.
The demo.js file in this codesandbox contains the following:
https://codesandbox.io/s/ppmxj46w8x
demo.js, beginning on line 115
<Grid item xs={12} md={6}>
<Typography variant="h6" className={classes.title}>
Avatar with text
</Typography>
<div className={classes.demo}>
<List dense={dense}>
{generate( // <-- what is this?
<ListItem>
<ListItemAvatar>
<Avatar>
<FolderIcon />
</Avatar>
</ListItemAvatar>
<ListItemText
primary="Single-line item"
secondary={secondary ? 'Secondary text' : null}
/>
</ListItem>,
)}
</List>
</div>
</Grid>
Here are the docs the code sandbox comes from.
Could someone please explain and point me to some documentation for this generate() method.
javascript reactjs
asked Nov 19 '18 at 17:41
MowzerMowzer
5,387640105
What does the generate() method mean in the following context and how does it work? I have never seen this before. Is this a method of the List component, or does it belong to React.js or JSX or does it belong to Javascript or does it belong to something else? I haven't been able to locate any documentation for it.
The demo.js file in this codesandbox contains the following:
https://codesandbox.io/s/ppmxj46w8x
demo.js, beginning on line 115
<Grid item xs={12} md={6}>
<Typography variant="h6" className={classes.title}>
Avatar with text
</Typography>
<div className={classes.demo}>
<List dense={dense}>
{generate( // <-- what is this?
<ListItem>
<ListItemAvatar>
<Avatar>
<FolderIcon />
</Avatar>
</ListItemAvatar>
<ListItemText
primary="Single-line item"
secondary={secondary ? 'Secondary text' : null}
/>
</ListItem>,
)}
</List>
</div>
</Grid>
Here are the docs the code sandbox comes from.
Could someone please explain and point me to some documentation for this generate() method.
javascript reactjs
javascript reactjs
asked Nov 19 '18 at 17:41
MowzerMowzer
5,387640105
asked Nov 19 '18 at 17:41
MowzerMowzer
5,387640105
asked Nov 19 '18 at 17:41
MowzerMowzer
5,387640105
asked Nov 19 '18 at 17:41
MowzerMowzer
5,387640105
asked Nov 19 '18 at 17:41
MowzerMowzer
5,387640105
5,387640105
If I understood correct, it has no direct relation to React. It's just a custom defined somewhere function, expecting React element as argument.
– hindmost
Nov 19 '18 at 17:49
Look at the top of thedemo.jsfile (Line 33). It is defined there. It is just a small helper method to generate multiple elements for this specific example. Not part ofreactormaterial-uiin any form.
– trixn
Nov 19 '18 at 17:52
add a comment |
If I understood correct, it has no direct relation to React. It's just a custom defined somewhere function, expecting React element as argument.
– hindmost
Nov 19 '18 at 17:49
Look at the top of thedemo.jsfile (Line 33). It is defined there. It is just a small helper method to generate multiple elements for this specific example. Not part ofreactormaterial-uiin any form.
– trixn
Nov 19 '18 at 17:52
If I understood correct, it has no direct relation to React. It's just a custom defined somewhere function, expecting React element as argument.
– hindmost
Nov 19 '18 at 17:49
If I understood correct, it has no direct relation to React. It's just a custom defined somewhere function, expecting React element as argument.
– hindmost
Nov 19 '18 at 17:49
Look at the top of the
demo.js file (Line 33). It is defined there. It is just a small helper method to generate multiple elements for this specific example. Not part of react or material-ui in any form.– trixn
Nov 19 '18 at 17:52
Look at the top of the
demo.js file (Line 33). It is defined there. It is just a small helper method to generate multiple elements for this specific example. Not part of react or material-ui in any form.– trixn
Nov 19 '18 at 17:52
add a comment |
1 Answer
1
active
oldest
votes
It's creating key value pairs for the passed in element:
function generate(element) {
return [0, 1, 2].map(value =>
React.cloneElement(element, {
key: value, // value = 0, 1, 2
}),
);
}
For example, line on 82 (it would just be appending a key):
<ListItem key={value}>
<ListItemText
primary="Single-line item"
secondary={secondary ? 'Secondary text' : null}
/>
</ListItem>
Which translates to:
<ListItem key={0}>
<ListItemText
primary="Single-line item"
secondary={secondary ? 'Secondary text' : null}
/>
</ListItem>
<ListItem key={1}>
<ListItemText
primary="Single-line item"
secondary={secondary ? 'Secondary text' : null}
/>
</ListItem>
<ListItem key={2}>
<ListItemText
primary="Single-line item"
secondary={secondary ? 'Secondary text' : null}
/>
</ListItem>
answered Nov 19 '18 at 17:49
matt carlottamatt carlotta
2,097510
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53380009%2fwhat-is-generate-in-this-context%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
It's creating key value pairs for the passed in element:
function generate(element) {
return [0, 1, 2].map(value =>
React.cloneElement(element, {
key: value, // value = 0, 1, 2
}),
);
}
For example, line on 82 (it would just be appending a key):
<ListItem key={value}>
<ListItemText
primary="Single-line item"
secondary={secondary ? 'Secondary text' : null}
/>
</ListItem>
Which translates to:
<ListItem key={0}>
<ListItemText
primary="Single-line item"
secondary={secondary ? 'Secondary text' : null}
/>
</ListItem>
<ListItem key={1}>
<ListItemText
primary="Single-line item"
secondary={secondary ? 'Secondary text' : null}
/>
</ListItem>
<ListItem key={2}>
<ListItemText
primary="Single-line item"
secondary={secondary ? 'Secondary text' : null}
/>
</ListItem>
answered Nov 19 '18 at 17:49
matt carlottamatt carlotta
2,097510
add a comment |
It's creating key value pairs for the passed in element:
function generate(element) {
return [0, 1, 2].map(value =>
React.cloneElement(element, {
key: value, // value = 0, 1, 2
}),
);
}
For example, line on 82 (it would just be appending a key):
<ListItem key={value}>
<ListItemText
primary="Single-line item"
secondary={secondary ? 'Secondary text' : null}
/>
</ListItem>
Which translates to:
<ListItem key={0}>
<ListItemText
primary="Single-line item"
secondary={secondary ? 'Secondary text' : null}
/>
</ListItem>
<ListItem key={1}>
<ListItemText
primary="Single-line item"
secondary={secondary ? 'Secondary text' : null}
/>
</ListItem>
<ListItem key={2}>
<ListItemText
primary="Single-line item"
secondary={secondary ? 'Secondary text' : null}
/>
</ListItem>
answered Nov 19 '18 at 17:49
matt carlottamatt carlotta
2,097510
add a comment |
It's creating key value pairs for the passed in element:
function generate(element) {
return [0, 1, 2].map(value =>
React.cloneElement(element, {
key: value, // value = 0, 1, 2
}),
);
}
For example, line on 82 (it would just be appending a key):
<ListItem key={value}>
<ListItemText
primary="Single-line item"
secondary={secondary ? 'Secondary text' : null}
/>
</ListItem>
Which translates to:
<ListItem key={0}>
<ListItemText
primary="Single-line item"
secondary={secondary ? 'Secondary text' : null}
/>
</ListItem>
<ListItem key={1}>
<ListItemText
primary="Single-line item"
secondary={secondary ? 'Secondary text' : null}
/>
</ListItem>
<ListItem key={2}>
<ListItemText
primary="Single-line item"
secondary={secondary ? 'Secondary text' : null}
/>
</ListItem>
answered Nov 19 '18 at 17:49
matt carlottamatt carlotta
2,097510
It's creating key value pairs for the passed in element:
function generate(element) {
return [0, 1, 2].map(value =>
React.cloneElement(element, {
key: value, // value = 0, 1, 2
}),
);
}
For example, line on 82 (it would just be appending a key):
<ListItem key={value}>
<ListItemText
primary="Single-line item"
secondary={secondary ? 'Secondary text' : null}
/>
</ListItem>
Which translates to:
<ListItem key={0}>
<ListItemText
primary="Single-line item"
secondary={secondary ? 'Secondary text' : null}
/>
</ListItem>
<ListItem key={1}>
<ListItemText
primary="Single-line item"
secondary={secondary ? 'Secondary text' : null}
/>
</ListItem>
<ListItem key={2}>
<ListItemText
primary="Single-line item"
secondary={secondary ? 'Secondary text' : null}
/>
</ListItem>
answered Nov 19 '18 at 17:49
matt carlottamatt carlotta
2,097510
edited Nov 19 '18 at 18:01
answered Nov 19 '18 at 17:49
matt carlottamatt carlotta
2,097510
answered Nov 19 '18 at 17:49
matt carlottamatt carlotta
2,097510
answered Nov 19 '18 at 17:49
matt carlottamatt carlotta
2,097510
2,097510
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53380009%2fwhat-is-generate-in-this-context%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
If I understood correct, it has no direct relation to React. It's just a custom defined somewhere function, expecting React element as argument.
– hindmost
Nov 19 '18 at 17:49
Look at the top of the
demo.jsfile (Line 33). It is defined there. It is just a small helper method to generate multiple elements for this specific example. Not part ofreactormaterial-uiin any form.– trixn
Nov 19 '18 at 17:52