0
254
VistasHow to display nested labels in multiple lines?
I have tried using the map method like I have seen on my research on how to do this but seems like its not the method to use when I have a structure like below:
const stepLabels = [
{ labels1: ['First One'] },
{ labels2: ['Second One', 'second One'] },
{ labels3: ['Third One', 'Third One', 'Third One'] }
];
And am using the Material UI Stepper to try to render the step labels below
<Stepper alternativeLabel activeStep={2} connector={<StepConnector active completed classes={{ line: classes.connector, active: classes.activeConnector, completed: classes.activeConnector }} />} className={classes.stepper}>
{steps.map(label => (
<Step key={label}>
<StepLabel classes={{ root: classes.stepLabelRoot }}>
<span>
{ stepLabels.map(item => item.labels)}
</span>
</StepLabel>
</Step>
))}
</Stepper>
Trying to get this, where below each node, it will display the label. So below the first node, it will say :
Below first node will show
First One
Second One will show twice below the second node
Second One
Second One
Third One will show three times on the third node
Third One
Third One
Third One
I have been trying to solve this issue for an hour but cant seem to find the answer to this.
Its really confusing to do this because I do know how to use the map method but this structure is a bit confusing. I have done trial and error and get different errors each time. Like something is not defined, etc.
1 Respuestas
Responde la pregunta0
You need to use the same property name in all elements of the list if you want to iterate and do something with it. Your code:
const stepLabels = [
{ labels1: ['First One'] },
{ labels2: ['Second One', 'second One'] },
{ labels3: ['Third One', 'Third One', 'Third One'] }
];
Should be changed to:
const stepLabels = [
{ labels: ['First One'] },
{ labels: ['Second One', 'second One'] },
{ labels: ['Third One', 'Third One', 'Third One'] }
];
If you want to add a newline, you can add a br element:
<Stepper alternativeLabel activeStep={2} className={classes.stepper}>
{stepLabels.map((label) => (
<Step key={label}>
<StepLabel classes={{ root: classes.stepLabelRoot }}>
{label.labels.map((item) => (
<>
{item}
<br />
</>
))}
</StepLabel>
</Step>
))}
</Stepper>
