I am using switch statement inside a react file .Getting Expression Expected error in first case line.
export default ({handle, state}) => (
<div style={styles.container} >
<h3 style={{margin: 0, marginBottom: 15}}>InputData</h3>
{items.map((item) => (
<div style={styles.lineContainer}>
switch(item.name){
case "name1": return <InputBox/>;
case "name2": return <SelectBox/>;
case "name3": return <<SelectBox/>;/>;
default: return <InputBox/>
}
</div>
))}
</div>
);
If you want to inline a switch statement, you need to encase it inside an IIFE.
export default ({handle, state}) => (
<div style={styles.container}>
<h3 style={{margin: 0, marginBottom: 15}}>InputData</h3>
{items.map((item) => (
<div style={styles.lineContainer}>
{(() => {
switch(item.name) {
case "name1": return <InputBox/>;
case "name2": return <SelectBox/>;
case "name3": return <SelectBox/>;
default: return <InputBox/>
}
})()}
</div>
))}
</div>
);
You have to use your switch statement in a function. Also, for clarity sake, you would be better off trying to keep conditional logic like that outside of your immediate component body.
export default function({ handle, state }) {
function renderSwitch(item) {
switch (item.name) {
case "name1":
return <InputBox />
case "name2":
return <SelectBox />
case "name3":
return <SelectBox />
default:
return <InputBox />
}
}
return (
<div style={styles.container}>
<h3 style={{ margin: 0, marginBottom: 15 }}>InputData</h3>
{items && items.map(item => <div style={styles.lineContainer}>{renderSwitch(item)}</div>)}
</div>
)
}
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.