How to Access URL Parameters in ReactJS
April 5, 2021
In this video, we’ll learn how to access URL parameters in ReactJS.
Source code for demo in the video
JSX
x
117
117
1
import React from 'react';2
3
//Parent component - contains main data4
class App extends React.Component {5
constructor(props) {6
super(props);7
this.state = { data: [] };8
this.addData = this.addData.bind(this);9
}10
11
addData(newData){12
let data = this.state.data;13
data.push(newData);14
this.setState({ data });15
}16
17
render() {18
let data = this.state.data;19
return (20
<div className="col-lg-12 text-center">21
<h1>React Forms - Controlled Component</h1> 22
<AddForm addData={this.addData} data={this.state.data}></AddForm> 23
<hr></hr>24
<ul>25
{data.map( (e,i)=>{26
return (27
<li key={i}>28
{e.user} | {e.game} | {e.points}29
</li>30
)31
})32
33
}34
</ul> 35
</div>36
);37
}38
}39
40
// Child component - the Form to add one record41
// Controlled Component - source of truth in React42
class AddForm extends React.Component{43
constructor(props){44
super(props);45
this.state = { data : {user:'',game:'Galaga',points:0}}46
this.handleChange = this.handleChange.bind(this);47
this.handleSubmit = this.handleSubmit.bind(this);48
}49
50
handleChange(event){51
let {name, value} = event.target;52
let data = this.state.data;53
data[name] = value;54
this.setState({data})55
}56
error=false;57
handleSubmit(event){58
//validate59
event.preventDefault();60
if(!this.error){61
this.props.addData(this.state.data);62
this.setState({ data : {user:'',game:'Galaga',points:0}});63
}64
}65
66
render(){67
let data = this.state.data;68
return(69
<div className="col-md-8 ml-5">70
<form>71
<div className="form-row">72
<div className="col-md-4 mb-3">73
<label>User:</label> 74
<input 75
className="form-control"76
name="user"77
value={data.user}78
onChange={this.handleChange}79
/> 80
</div>81
<div className="col-md-4 mb-3">82
<label>Game:</label>83
<select 84
className="form-control"85
name="game"86
defaultValue={data.game}87
onChange={this.handleChange}88
>89
<option>Pac-Man</option>90
<option>Pong</option>91
<option>Galaga</option>92
<option>Tetris</option>93
</select>94
</div>95
<div className="col-md-4 mb-3">96
<label>Points:</label>97
<input 98
className="form-control"99
name="points"100
type="number"101
min='0'102
max='10000'103
value={data.points}104
onChange={this.handleChange}105
/> 106
</div>107
<div className="col-md-4 mb-3">108
<button onClick={this.handleSubmit} className="btn btn-primary">Submit</button>109
</div>110
</div>111
</form>112
</div>113
)114
}115
}116
117
export default App;
