So, this is what I'm doing inside of the return:
return (
<React.Fragment>
<Styles>
<Container>
<Row className="rows container">
{results.length > 0 && (
{results.map(result => (
<Col className="columns " xs={12} sm={6} md={4} lg={3} >
<img src={result.poster_path} alt="movie poster" />
</Col>
))}
)}
</Row>
</Container>
</Styles>
</React.Fragment>
)
But, it's giving me the error Unexpected token, expected "," . I don't understand, especially because I have used the same syntax in another component and that's not reporting any errors.
Your return statement should look like this
return (
<React.Fragment>
<Styles>
<Container>
<Row className='rows container'>
{results.length > 0 &&
results.map(result => (
<Col className='columns ' xs={12} sm={6} md={4} lg={3}>
<img src={result.poster_path} alt='movie poster' />
</Col>
))}
</Row>
</Container>
</Styles>
</React.Fragment>
)
(I removed the square brackets from around results.map)
Square brackets are used to inform jsx that you are going to execute javascript inside the jsx. You already started that execution on {results.length, if you add another pair of brackets inside the js execution block it will be perceived by js as you creating an object, hence the expected comma error.
Related
I have three components im trying to connect together to add the number of items I have in a shopping cart. I have the main component which creates the CartCount object and setCartCount functionality:
function MinerStore() {
const [cartCount, setCartCount] = useState([0]);
const addToCart = () => {
setCartCount(cartCount + 1);
};
return (
<>
<div >
<StoreNav cartCount={cartCount} />
<div>
<StoreCard addToCart={addToCart} />
</div>
</div>
</>
);
}
I also then have the two components I am trying to show the added count on as well as the added count functionality:
export default function StoreCard(addToCart) {
return (
<ThemeProvider theme={theme}>
<main>
<Container>
<Grid container spacing={3}>
{data.map((data) => (
<Grid item key={data.id} xs={12} sm={6} md={3}>
<Card>
<CardContent>
</CardContent>
<CardActions>
<div>
<Button onClick={addToCart}>
Add to Cart
</Button>
</div>
</CardActions>
</Card>
</Grid>
))}
</Grid>
</Container>
</main>
</ThemeProvider>
);
}
export default function StoreNav(cartCount) {
return (
<AppBar position="static">
<Toolbar>
<IconButton>
<Badge badgeContent={cartCount} color="primary">
<ShoppingCartIcon />
</Badge>
</IconButton>
</Toolbar>
</AppBar>
);
}
You've set your initial state as an array [0].
Set it as as 0 and check it out
And ofc as the people above mentioned you should either use props or {addToCart} in the child's parameter.
Then on button should look as such:
<Button onClick={addToCart /* or props.addToCart */}>Add to Cart </Button>
return (
<form className={classes.root} noValidate autoComplete="off">
{Object.keys(fields).map(key => (
<FormControl key={key} className={classes.formControl}>
<TextField className={classes.textField} value={fields[key].type} />
<IconButton
aria-label={`Remove ${fields[key].type} field`}
className={classes.button}
onClick={() => deleteField(value, key, onChange)}
>
<ClearIcon />
</IconButton>
</FormControl>
<div></div>
))}
</form>
);
Anything entered after the FormControl gives me this error, be it this example div or anything more complex. I can render anything inside the FormControl tags, but the moment it's moved out or anything else outside of them gets this error.
Assuming that the <div></div> segment after the <FormControl /> is there for a reason, you will need to wrap the return with React Fragments. This is used to group the elements within the Array.map() callback
{Object.keys(fields).map(key => (
<>
<FormControl key={key} className={classes.formControl}>
<TextField className={classes.textField} value={fields[key].type} />
<IconButton
aria-label={`Remove ${fields[key].type} field`}
className={classes.button}
onClick={() => deleteField(value, key, onChange)}
>
<ClearIcon />
</IconButton>
</FormControl>
<div></div>
</>
))}
I think you should remove <div></div> from after <FormControl />. And your code will work perfectly fine.
I am using antd's selector, I want to add a prompt to the left of the selection box to indicate what this selector is used to select. I tried to use the label tag in the select tag, but this will give an error. I also thought about using pseudo-elements, but that didn't work. Do you know how to do it. The effect I want is as follows. The left side of the selection box is the prompt word, and the right side is the selection result of the selector.
There is no build-in way, you need to compose it from other components.
For example: using CheckBox, Dropdown, Menu and layout components like Row and Col
const data = ['Jack', 'Lucy', 'Momo', 'Alex'];
export default function App() {
const [selected, setSelected] = useState('Jack');
const menu = (
<Menu onSelect={({ key }) => setSelected(key)}>
{data.map(item => (
<Menu.Item key={item} value={item}>
{item}
</Menu.Item>
))}
</Menu>
);
return (
<FlexBox>
<FlexBox>
<h3>All Checkboxed</h3>
<Select defaultValue="Jack">
{data.map(uniqueValue => (
<Select.Option value={uniqueValue} key={uniqueValue}>
<Checkbox>{uniqueValue}</Checkbox>
</Select.Option>
))}
</Select>
</FlexBox>
<FlexBox>
<h3>Side By Side</h3>
<Checkbox disabled>
<Select defaultValue="Jack">
{data.map(uniqueValue => (
<Select.Option value={uniqueValue} key={uniqueValue}>
{uniqueValue}
</Select.Option>
))}
</Select>
</Checkbox>
</FlexBox>
<FlexBox>
<Card size="small" style={{ width: 120 }}>
<Row type="flex" gutter={10}>
<Col>
<Checkbox disabled />
</Col>
<Col>
<Dropdown overlay={menu} trigger={['click']}>
<Row type="flex" style={{ alignItems: 'center' }} gutter={10}>
<Col>{selected}</Col>
<Col>
<Icon type="down" />
</Col>
</Row>
</Dropdown>
</Col>
</Row>
</Card>
</FlexBox>
</FlexBox>
);
}
This question already has answers here:
Warning: Unreachable code , using Reactjs
(2 answers)
Closed 4 years ago.
My reactjs app has a warning unreachable code no-unreachable, has anyone ever experienced or helped my problem
the error if else return statement
the error is in the section :
)
}
return (
Thank you in advance
const listNews = [];
if (<Route path="/berita/:id" component={ViewsBerita} />) {
return(
<div>
<GridItem xs={12} sm={12} md={8}>
<div className={classes.section} style={styleTitle}>
<div className={classes.container}>
<HashRouter>
<Route path="/berita/:id" component={ViewsBerita} />
</HashRouter>
</div>
</div>
</GridItem>
</div>
);
} else {
return(
<div>
<GridItem xs={12} sm={12} md={7}>
<div style={style}>
<ul>
{renderTodos}
</ul>
<br />
<ul style={pagination}>
{renderPrevBtn}
{pageDecrementBtn}
{renderPageNumbers}
{pageIncrementBtn}
{renderNextBtn}
</ul>
</div>
</GridItem>
</div>
)
}
return (
<div>
<Headers />
<div className={classNames(classes.main, classes.mainRaised)} key="i">
<br />
<GridContainer>
<GridItem xs={12} sm={12} md={12}>
<div className={classes.section} style={styleTitle}>
<div className={classes.container}>
<h1> <b> Berita & Event </b> </h1>
<div style={{ width: '25%', marginLeft: '37%' }}>
<p style={{ border: '1px solid', borderColor: 'yellow'}} > </p>
</div>
</div>
</div>
</GridItem>
{listNews}
</GridContainer>
<Footers />
</div>
<Footer />
<ScrollToTop showUnder={160} style={{zIndex: 100 }}>
<span> <img src={Up} alt="up" style={{ width: '40px', height: '40px' }} /> </span>
</ScrollToTop>
</div>
);
}
}
export default withStyles(componentsStyle)(Components);
My reactjs app has a warning unreachable code no-unreachable, has anyone ever experienced or helped my problem
the error if else return statement
the error is in the section :
)
}
return (
Thank you in advance
That is because that last return statement will never work. You already have an if...else statement. Which means either of that will work and either of that will return (either the if condition or the else condition will work), and your code will never under any circumstances go to the last return statement and therefore that code is unreachable.
I have the following React code:
render() {
return (
<NavItem dropdown toggleOnHover className='collapse-left'>
<DropdownButton nav>
<Icon bundle='fontello' glyph='bullhorn' />
{this.getBadge()}
</DropdownButton>
<Menu alignRight ref='bullhorn-menu' id='notifications-menu' className='double-width' alwaysInactive>
<MenuItem header>
<Entity entity='Notifications' />
</MenuItem>
{this.state.notifications.map((item, index) => {
return (
<Notification notification={item} key={index} />
)
})}
<MenuItem noHover>
<Grid collapse style={{marginBottom: -10}}>
<Row>
<Col xs={12} collapseLeft collapseRight>
<Button block className='notification-footer-btn left-btn'>MARK ALL READ</Button>
</Col>
</Row>
</Grid>
</MenuItem>
</Menu>
</NavItem>
)
}
The code above doesn't work, because it throws:
react-with-addons.js:9729 Uncaught TypeError: Cannot read property 'toUpperCase' of undefined
However, when I surround the map() statement with a div, it works, but that breaks the layout.
The Notification component just returns something like this:
<MenuItem href='/'>
<Grid>
<Row>
<Col xs={2} className='avatar-container' collapseRight>
<div><img src='/imgs/avatars/avatar22.png' width='40' height='40' alt='sarah_patchett' /></div>
<div className='text-center'>
<BLabel bsStyle='info'>NEW</BLabel>
</div>
</Col>
<Col xs={10} className='notification-container' collapseLeft collapseRight>
<div className='time'>
<strong className='fg-darkgray50'><Icon bundle='fontello' glyph='chat-5'/><em><Entity entity='notificationsTimeFirst' /></em></strong>
</div>
<div className='message-header'>
<strong className='fg-darkgreen45'>Sarah Patchett sent you a private message</strong>
</div>
<div className='message-details fg-text'>
<span>{"Hey Anna! Sorry for delayed response. I've just finished reading the mail you sent couple of days ago..."}</span>
</div>
</Col>
</Row>
</Grid>
</MenuItem>
Can someone tell me how to just loop over my array and render the Notification component, without the surrounding div?
Currently it is not possible to return multiple components like that, so you need to wrap them in something.
Why don't you just change the style of the container so that it doesn't break the layout?
For example:
<div style={{ display: "inline" }}>
{this.state.notifications.map((item, index) => {
return (
<Notification notification={item} key={index} />
)
})}
</div>
Alternatively, you could do this:
let menuItems = [
<MenuItem header key="header">
<Entity entity='Notifications' />
</MenuItem>
].concat(notifications);
return <Menu>
{ menuItems }
</Menu>;
Now the contents of the menu is an array, so every item needs a key.