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.
Related
In the react component, there is a form used to post a comment. When I post a comment, it gets submitted and appears in the database. Using map function, I'm trying to display the blog comments on the browser but it just does not appear on the browser. I can see the array of comments in the redux devtools.
<Container className="content">
<div>
<h1 className='display-2'>{blog.title}</h1>
<Image src={blog.image} />
<h2 className='text-muted mt-3'>Category: {blog.category}</h2>
<div className='mt-5 mb-5' dangerouslySetInnerHTML={createBlog()} />
</div>
<div>
{blog?.post?.comments.length === 0 && <Message variant='info'>No comment yet</Message>}
<div>
{blog?.post?.comments.map((comment) => (
<div key={comment?.id}>
<strong>{comment?.name}</strong>
<p>{comment?.dateCreated.substring(0, 10)}</p>
<p>{comment?.comment}</p>
</div>
))}
</div>
{blogCommentLoading && <Loader />}
{blogCommentSuccess && <Message variant='success'>Comment Submitted</Message>}
{blogCommentError && <Message variant='danger'>{blogCommentError}</Message>}
<Form onSubmit={submitHandler}>
<Form.Group controlId='comment'>
<Form.Label>Comment</Form.Label> {/* The label called review is named comment in the database(backend)*/}
<Form.Control
as='textarea'
row='5'
value={comment}
onChange={(e) => setComment(e.target.value)}
></Form.Control>
</Form.Group>
<Button type='submit' variant='primary'>Submit</Button>
</Form>
</div>
</Container>
);
};
What am I missing out, how do I make the comments to appear on the browser?
Replace
{blog?.post?.comments.length === 0 && <Message variant='info'>No comment yet</Message>}
<div>
{blog.post.comments.map((comment) => (
<div key={comment?.id}>
<strong>{comment?.name}</strong>
<p>{comment?.dateCreated.substring(0, 10)}</p>
<p>{comment?.comment}</p>
</div>
))}
</div>
with:
{!blog?.post?.comments?.length ? (
<Message variant='info'>No comment yet</Message>
) : (
<div>
{blog?.post?.comments.map((comment) => (
<div key={comment?.id}>
<strong>{comment?.name}</strong>
<p>{comment?.dateCreated.substring(0, 10)}</p>
<p>{comment?.comment}</p>
</div>
))}
</div>
)}
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.
I tried to assign div side by side in my react website. However,I received the error Uncaught Invariant Violation: Minified React error.
This is my toolbar in my react website
let EnhancedTableToolbar = props => {
const { numSelected, classes ,deletefunc} = props;
return (
<Toolbar
className={classNames(classes.root, {
[classes.highlight]: numSelected > 0,
})}
>
<div className={classes.title}>
{numSelected > 0 ? (
<Typography color="inherit" variant="subtitle1">
{numSelected} selected
</Typography>
) : (
<Typography variant="h6" id="tableTitle">
User List
</Typography>
)}
</div>
<div className={classes.spacer} />
<div className={classes.actions}>
{numSelected > 0 ? (
<div>
<div style="width: 100px; float:right;">
<Tooltip title="Delete">
<IconButton aria-label="Delete">
<DeleteIcon onClick={() => { if (window.confirm('Are you sure you wish to delete '+numSelected +' item?')) {deletefunc()} } }>
</DeleteIcon>
</IconButton>
</Tooltip>
</div>
<div style="width: 100px; float:right;">
<Tooltip title="Edit">
<IconButton aria-label="Edit">
<EditIcon>
</EditIcon>
</IconButton>
</Tooltip>
</div>
</div>
) : (
<Tooltip title="Filter list">
<IconButton aria-label="Filter list">
<FilterListIcon />
</IconButton>
</Tooltip>
)}
</div>
</Toolbar>
);
};
I received the error when I set the width to 100px and float to right in my delete button and edit button. The code will work if I never set the width and float. However,it div by up down instead of side by side. Anyone know how to solve this issue?
That is not how you define inline styles in JSX.
The style attribute accepts a JavaScript object with camelCased
properties rather than a CSS string.
Try this instead:
<div style={{ width: '100px', float: 'right' }}>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
My question.js component:
render() {
return (
this.state.questions.map((question) => {
return (
<section key={question.id} className='display-question'>
<div className='wrapper'>
<h3>Kategoria: {question.category}</h3>
<p>Poziom: {question.level}</p>
<p>Punkty: {question.pointAmount + question.pointBoost}</p>
<img alt='' style={{width: '80%'}} src={question.photoURL}/>
</div>
</section>
)
})
)
}
My questions.js component - it is a list, where the user picks the question he wants to see more of.
render() {
return (
<section className='display-question'>
<div className='wrapper'>
<ul style={{listStyleType: 'none'}}>
{
this.state.questions.map((question) => {
return (
<li key={question.id}>
<h3>Kategoria: {question.category}</h3>
<p>Poziom: {question.level}</p>
<p>Punkty: {question.pointAmount + question.pointBoost}</p>
<img alt='' style={{width: '20%'}} src={question.photoURL}/>
<Router>
<React.Fragment>
<Link to={`/question/${question.id}`}
style={{display: 'block', margin: 'auto'}}>Rozwiaz to zadanie
</Link>
<Route exact path='/question/:id' component={Question}/>
</React.Fragment>
</Router>
</li>
)
})
}
</ul>
</div>
</section>
)
}
What I want: I want the component to be rendered as a separate page. Right now, the component is being appended to the bottom of the link. Like this:
So how can I make the Question component to be rendered on it's own? Not to be appended, but to be the only component there.
My navbar navigation does it the way I want, but I cannot see how it's different from the links way of doing things:
render() {
return (
<React.Fragment>
<Router>
<React.Fragment>
<Bar>
<Bar.Header>
<Bar.Brand>
<Link id='home' to="/">UczIchApp</Link>
</Bar.Brand>
</Bar.Header>
<Nav>
<LinkContainer id='about' to='/about'>
<NavItem>O nas</NavItem>
</LinkContainer>
{
this.state.user ?
<React.Fragment>
<LinkContainer id="questions" to='/questions'>
<NavItem>Zadania</NavItem>
</LinkContainer>
<NavItem onClick={this.logout}>Wyloguj się</NavItem>
</React.Fragment>
:
<NavItem onClick={this.openLogin}>Zaloguj się</NavItem>
}
</Nav>
</Bar>
<Route exact path="/about" component={About}/>
<Route exact path="/questions" component={Questions}/>
<Route exact path="/" component={Home}/>
</React.Fragment>
</Router>
<Modal
show={this.state.show}
onHide={this.handleClose}>
<Modal.Header
closeButton>
<Modal.Title> Modal
heading </Modal.Title>
</Modal.Header>
<Modal.Body>
<form>
<FormControl
id="email"
type="email"
label="Email address"
placeholder="Enter email"/>
<FormControl id="password" label="Password" type="password"/>
<Button onClick={this.login}>Zaloguj</Button>
</form>
</Modal.Body>
<Modal.Footer>
<Button id="close" onClick={this.handleClose}>Close</Button>
</Modal.Footer>
</Modal>
</React.Fragment>
)
}
Turned out I had multiple Routers declared. Link to a post that solved it: React router renders component after a refresh
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.