I am transforming my website to react site but the script tags inside do not work. It just says unexpected token. Here's the code.
<div className="people">
How many of you shall we expect?
<br />
<select id="noofpeople">
<option>1 person</option>
<script>
var count = 2;
while(count<21){
document.write("<option>"+count+" people"+"</option>");
count++;
}
</script>
</select>
</div>
I would suggest this.
class GetSelection extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('Your selections is: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
How many of you shall we expect?
<select value={this.state.value} onChange={this.handleChange}>
<option value="1">1 person</option>
<option value="2">2 person</option>
<option value="3">3 person</option>
</select>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}Just to Achieve the result you want since you can't return a script in JSX you could try something like.
import React from 'react';
class PrintOptions extends React.Component{
render() {
let count = 2;
const addOptions = () => {
while (count < 21) {
document.write("<option>" + count + " people" + "</option>");
count ++;
}
}
return(
<div>
{addOptions()}
</div<
)}
}
You cann't return a script tag in JSX. You need to do such things in component lifecycle methods. Here is an example for you.
class MyComponent extends React.Component{
constructor(props) {
super(props);
// Don't call this.setState() here!
this.state = { options: [] };
}
componentDidMount () {
var count = 2;
let newOptions = [];
while(count<21){
newOptions.push(`${count} People`);
}
this.setState({ options: newOptions });
}
render(){
return (<div className="people">
How many of you shall we expect?
<br />
<select id="noofpeople">
<option>1 person</option>
{this.state.options.map((option, index) => {
return <option key={index}>{option}</option>
})}
</select>
</div>)
}
}
export default MyComponent;
Hope this works for you.