Loading a component after submitting a form - reactjs

I tried to load a component to my web app after submitting a form. However, the value doesn't persist on the web page for more than a few seconds.
import React,{Component} from 'react';
import Load from './load'
class Form extends Component {
constructor(props) {
super(props);
this.state = {value: '',
showComponent: false,
};
this.handleChange = this.handleChange.bind(this);
this._handleSubmit = this._handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
_handleSubmit(event) {
//alert('A name was submitted: ' + this.state.value);
this.setState({
showComponent: true,
});
}
render() {
return (
<div>
<form onSubmit={this._handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
{this.state.showComponent ?
<Load /> :
null
}
</div>
);
}
}
export default Form
The code for Load is as follows
import React,{Component} from 'react';
class Load extends Component {
render() {
return (
<p>hello</p>
)
}
}
export default Load
As I had said, the value of hello doesn't stay on my screen for more than a few seconds. Please help. I am very new to react

Just try preventing default Submit Event of the form this will initiate a GET request and your URL will reload and this will lead to your main component ReRendering and showComponent is being set to false again.
_handleSubmit(event) {
event.preventDefault(); // Add this line to prevent your form's default event.
//alert('A name was submitted: ' + this.state.value);
this.setState({
showComponent: true,
});
}

Related

ReactJs input first value getting empty

import React, { Component } from "react";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { value: "" };
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
console.log(this.state.value);
this.setState({ value: event.target.value });
}
render() {
return (
<form>
<label>
Name:
<input
type="text"
value={this.state.value}
onChange={this.handleChange}
/>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
console log screenshot
I'm getting first input value empty. I have different app. I'm basically try to doing tip calculator app. I don't need submit button. The user will enter a value, but it does not calculate correctly because the first value is empty. At the same time, it does not show the last value entered, only when clicked, all the entered values are correct. By the way, i got this form from React own site, but it's the same error that i encountered. Thank you!
Your console.log logs the value before you change it. Thus it will always be the previous value.
You also have to keep in mind that the Component.setState method might not execute immediately.
Think of setState() as a request rather than an immediate command to update the component. For better perceived performance, React may delay it, and then update several components in a single pass. React does not guarantee that the state changes are applied immediately.
Therefore you should use a callback. E.g.
handleChange(event) {
this.setState({ value: event.target.value }, () => {
console.log(this.state.value);
});
}
Here is an executable example. Click Run code snippet.
class App extends React.Component {
constructor(props) {
super(props);
this.state = { value: "" };
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({ value: event.target.value }, () => {
console.log(this.state.value);
});
}
render() {
return (
<form>
<label>
Name:
<input
type="text"
value={this.state.value}
onChange={this.handleChange}
/>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Set initial value to 0 so that it will not be empty.
this.state = { value: 0 };
Also move your console.log as callback function to setState so that you can see the updated value.
import React, { Component } from "react";
export default class App2 extends React.Component {
constructor(props) {
super(props);
this.state = { value: 0 };
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({ value: event.target.value }, () => {
console.log(this.state.value);
});
}
render() {
return (
<form>
<label>
Name:
<input
type="text"
value={this.state.value}
onChange={this.handleChange}
/>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}

Why value of input here at reactjs is undefined?

I want to change state by the value of input but it is undefined.
It should work, the value is for every HTML tag so what is wrong with my code??
import React, { Component } from "react";
class App extends Component {
constructor() {
super();
this.state = {
firstName: " "
};
this.handleChange = this.handleChange(this);
}
handleChange(event) {
this.setState({
firstName: event.target.value
});
}
render() {
return (
<form>
<input
type="text"
placeholder="Firstname"
onChange={this.handleChange}
/>
<h1>{this.state.value}</h1>
</form>
);
}
}
export default App;
There's no value stored in your state, so it is undefined, and you do not correctly bind this to your handler. Output this.state.firstName instead:
import React, { Component } from "react";
class App extends Component {
constructor() {
super();
this.state = {
firstName: " "
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({
firstName: event.target.value
});
}
render() {
return (
<form>
<input
type="text"
placeholder="Firstname"
onChange={this.handleChange}
/>
<h1>{this.state.firstName}</h1>
</form>
);
}
}
export default App;
First try to bind this for handleChange using an arrow function. Also use the state variable to set the value property of the input .
Sandbox link: https://codesandbox.io/s/react-basic-example-qmyw5
import React, { Component } from "react";
class App extends Component {
constructor() {
super();
this.state = {
firstName: " "
};
}
handleChange = (event) => {
this.setState({
firstName: event.target.value
});
}
render() {
return (
<form>
<input
type="text"
placeholder="Firstname"
onChange={this.handleChange}
value={this.state.firstName}
/>
<h1>{this.state.firstName}</h1>
</form>
);
}
}
export default App;

Trying to put a script in React using dangerouslySetInnerHTML

I'm trying to write an XSS CTF exercise on React. To start I'm trying to get a fixed javascript alert to run using dangerouslySetInnerHTML. I believe, on submit, it adds on the script to the webpage but it doesn't run. Thank you in advance!
import React, { Component } from "react";
import {withRouter} from 'react-router';
import ReactDOM from 'react-dom';
class User extends Component {
constructor(props) {
super(props);
this.state = {value: '', final: 'asdf'};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
event.preventDefault()
this.setState({final:'<script type="text/javascript">alert(1)</script>'})
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<input type="text" placeholder="Type a message" id="messageField" onChange={this.handleChange}/> <br/>
<input type="submit" className='submitbutton' value="Submit" />
</form>
<div dangerouslySetInnerHTML={{__html: this.state.final}} />
</div>
);
}
}
export default withRouter(User)

can i pass a state value with the jsx code ?? in reactjs

Hello everybody I'm wondering if I can pass a state value from a component to other where I'm returning jsx code to be displayed for example I have 3 components.
1
import React, { Component } from 'react';
import Conteneur from './Conteneur';
class Header 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('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
<Conteneur values={this.state.value} />
</form>
);
}
}
export default Header;
2 app.js
import React, { Component } from 'react';
import Header from './Header';
import Conteneur from './Conteneur';
import './App.css';
class App extends Component {
render() {
return (
<div className="App" >
<br />
<Header />
<br />
<Conteneur />
</div>
);
}
}
export default App;
3 and finally
import React, { Component } from 'react';
const Conteneur = () => {
return (
<div className="tab"><span>ok test </span></div>
);
};
export default Conteneur;
I like to pass the state value of header that I have from the input to conteneur and then display in the box while I have some code all the examples that I saw online they are sending state like this:
class Dashboard extends Component {
...
...
render(){
return(
<Sidebar data={this.state.data1}/>
);
}
}
So can I do like this <Conteneur values={this.state.value} /> in the form ?
And I imported Conteneur.
i updated the code but the output is
Yes you can do, only one thing you are missing. Receive the props in the function parameters then render that in the ui.
Like this:
const Conteneur = (props) => {
return (
<div className="tab"><span>value: {props.value} </span></div>
);
};

React - setState not resetting input

Following my first React tutorial. My code seems to be exactly like the tutorial, but my input doesn't reset within a form component. The first time I submit, everything works fine, but the state holds onto the first value. Even when calling setState with a console.log in a callback, it seems like setState doesn't even fire. this is bound in my constructor function.
import React, { Component } from 'react';
import TenantActions from '../actions/TenantActions';
export default class AddTenantForm extends Component {
constructor(props) {
super(props);
this.state = {
name: '',
}
this.onSubmit = this.onSubmit.bind(this);
}
onSubmit(event) {
event.preventDefault();
console.log('1. On Submit click, sending addNewTenant action w/', this.state);
TenantActions.addNewTenant(this.state);
this.setState = ({ name: '' });
}
render() {
return (
<form>
<div className="form-group">
<input type="text"
className="form-control"
id="tenantName"
placeholder="Bob Smithers"
value={this.state.name}
onChange={e => this.setState({ name: e.target.value })}
/>
</div>
<button className="btn btn-default"
onClick={this.onSubmit}
>Submit</button>
</form>
)
}
}
this.setState is a function. You have a typo (= extra) in the function onSubmit.
Replace this.setState = ({...}) with this.setState({name: ''})
More about setState

Resources