I'm creating an app and I need to render a form element multiple times with some of the variable names changed around. Unfortunately, I'm having some issues where not all of the code is being returned from the component. I've taken out some of the variable declarations to make this easier to read.
Primary Component
export default function StrengthLog() {
return (
<Container id="strengthContainer">
<SelectMovements />
<Form>
{
movement.map(movement => {
const checked = movement[1].triggered
if (checked){
return <StrengthForm props={movement}/>
}
})
}
<Button content='submit'>Submit</Button>
</Form>
</Container>
)
}
Component being returned
export default function StrengthForm({props}) {
return (
<div>
<h1>Hello!</h1>
{
props[1].triggered
? (
setsArray.map(item => {
return <Group widths='equal'>
<Select fluid label='Reps' placeholder='Select Reps' options={repOptions} name={`${liftVarName}-rep-1`}/>
<Input fluid placeholder='Enter Weight' label='Weight' name={`${liftVarName}-weight-1`}/>
<Button className="addSet">+</Button>
<Button className="deleteSet">x</Button>
</Group>
})
)
: console.log('Thing')
}
</div>
)
}
What's happening is that it's returning the <h1>
of StrengthForm
but it's not returning the other information contained within the curly braces.
The issue was that I was declaring setsArray
as const setsArray = new Array(props[1].sets)
which gives me StrengthForm.js:9 (4) [empty × 4]
in the console. I suspected because the array actually had no content that I needed to add something there so I commented my initial declaration and did this instead.
const setsArray = (() => {
const emptyArray = []
for(let i = 0; i <= props[1].sets; i++) {
emptyArray.push(' ');
}
return emptyArray;
})();
return (
<div>
<h1>Hello!</h1>
{
props[1].triggered
? (
setsArray.map(() => {
return <>
<Group widths='equal'>
<Select fluid label='Reps' placeholder='Select Reps' options={repOptions} name={`${liftVarName}-rep-1`}/>
<Input fluid placeholder='Enter Weight' label='Weight' name={`${liftVarName}-weight-1`}/>
<Button className="addSet">+</Button>
<Button className="deleteSet">x</Button>
</Group>
</>
})
)
: console.log('Thing')
}
</div>
)
Everything popped up after I changed it to this!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.