score:1
Accepted answer
you've included a javascript if
statement inside the return, mixed with the jsx.
quoting the react documentation:
if
statements andfor
loops are not expressions in javascript, so they can't be used in jsx directly. instead, you can put these in the surrounding code.
to fix the unexpected token error, move the if
statement before the return
:
{
this.state.answers.filter(this.issearched(this.state.searchterm)).map((item) => {
if(answer) {
this.reset();
}
return (
<div>
<form onsubmit={this.answersubmitted}>
<text> {item} </text>
<input type="text" placeholder="answer the question"/>
</form>
</div>
)
})
}
i would also recommend that you perform the mapping before the return in the render
function. that way, the rendering is more clearly separated from the data manipulation.
render() {
const answer = true;
const answerforms = this.state.answers
.filter(this.issearched(this.state.searchterm))
.map((item) => {
if (answer) {
this.reset()
}
return (
<div>
<form onsubmit={this.answersubmitted}>
<text> {item} </text>
<input type="text" placeholder="answer the question" />
</form>
</div>
)
})
return (
<div classname="app">
<div classname="center">
<form >
search: <input type="text" onchange={this.onsearchchange} /><br />
</form>
<form onsubmit={this.submitqa}>
q & a:
<input type="text" placeholder=" course/q/a" />
<button type="submit"> submit </button>
</form>
<span>{basicformat}</span>
</div>
{answerforms}
</div>
)
}
Source: stackoverflow.com
Related Query
- Cannot conditional render in render method react js
- Cannot update state from render method React
- Conditional with multiple React Components in class render method
- How to call a function method in a component class render method? getting Uncaught TypeError: Cannot read property 'value' of null in React
- Rendering React components with promises inside the render method
- Jest Enzyme test a React component that returns null in render method
- For loop in react render method
- React conditional render pattern
- Spying on React functional component method with jest and enzyme; Cannot spyOn on a primitive value
- `display: none` vs conditional render in React
- React - How to iterate over dictionary in render method using JSX?
- Calling setState() in React from render method
- React Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `App`
- React onLoad event on image tag is not getting called when using conditional render
- How to provide dynamic className to element in React Class render method
- Flow error with react render method
- React router 4: How to wait for a promise to resolve, inside render method of Route?
- React ambiguous error messaging: "Check the render method of `Constructor`."
- accessing object attributes in the react render method
- Cannot access DOM with server-side render - react 0.14.1, react-dom 0.14.1 and react-router 1.0.0-rc3
- React Native Element Type is Invalid. Check Render Method
- Cannot render same route with different parameters react router v4
- Performance issue when destructuring props on React render method
- React Conditional Render and Navbar
- React component function returning JSX causes error when used in render method of ES6 class React component
- Cannot render const in a react component
- React set focus on input[type="number"] with conditional render
- Why my render method is react called twice
- Data unavailable before render method is executed - React Native
- Too many re-renders. React limits the number of renders to prevent an infinite loop. Updating state of a functional component inside the render method
More Query from same tag
- position <a> link over <img> with responsive behaviour
- React-Router : What is the purpose of IndexRoute?
- reactjs with core 3.1 api controller. Getting json error instead of returning data
- When given a sentence, how to create a border for every single word including whitespace through iteration in react?
- Typescript & React array of objects and returning JSX
- ReactJS, not getting output on console
- Pass id as props in react-router-dom
- Javascript: Recursion returning undefined
- Audio not playing on render - React
- How can I style Googles "save to drive" button
- How do I handle a checkbox array to create a feature filter in ReactJS?
- How do I change the change the color inside the iframe - React
- How to store the new updated values with keys from slider Material UI ReactJS
- change react Build cofiguration
- how to reverse fetch images from nasa APOD api in react
- is there any way to make this react component less verbose?
- Solving multiple renders of component incl. useEffect, useState and Axios
- Is it possible to perform more validation after validationSchema, Yup, is passed?
- React.js - input losing focus when rerendering
- Can i put a setTimeout() in a dynamic class?
- Problem with carousel with thumbs (react-id-swiper)
- Using Dividers inside Material-UI Tabs
- No correct data in fetching in react hook
- How to uncheck selected radio input onChange with react to reset current showing data?
- React Storybook Component Ajax Request How To
- Define useSelector type from external file React Typescript
- How to dispatch a value from Textarea to store React Redux
- Get current scroll position of ScrollView in React Native
- Types not matching up when using a function to render a component
- Using graph QL and React, how can I divide API by month?