I am trying to build a very simple calculator that just takes the input from two text boxes, and adds the values together when you press the Add button and subtracts the two values when you press the subtract button. The total should output to a third text box. This is what I have so far:
import React, { useState } from 'react';
import './App.css';
class Calculator extends React.Component{
constructor(){
super();
this.state={
number1:"",
number2:"",
total: ""
}
}
handlenumber1 = (event) => {
this.setState({number1:event.target.value})
}
handlenumber2 = (event) => {
this.setState({number2:event.target.value})
}
exe = (e) => {
e.preventDefault();
this.setState({total: parseInt(this.state.number1) + parseInt(this.state.number2)})
}
render(){
return(
<div>
<h1>Simple Calculator</h1>
<form onSubmit={this.exe}>
<div>
Number 1:
<input type="text" value={this.state.number1} onChange={this.handlenumber1}/>
</div>
<div>
Number 2:
<input type="text" value={this.state.number2} onChange={this.handlenumber2}/>
</div>
<div>
<button type= "submit"> Add </button>
</div>
<div>
<button type= "submit"> Subtract </button>
</div>
</form>
<input type = "text" name = "name" value = {this.state.total}/>
</div>
)
}
}
export default Calculator;
As of now, I am able to get the addition output to the textbox but I am confused on getting the subtraction output to the same textbox using a different button. I assume I would use something like this.setState({total: parseInt(this.state.number1) - parseInt(this.state.number2) but I am unsure of how to get it into the same textbox. Thanks in advance!
Related
I have react app with with complex component layout with multiple forms.
I know that placing one form inside another is not allowed. But I have a component which renders a form and must be placed inside my form. To prevent forms be rendered one inside another I use react portal.
But when I try to submit form rendered with portal, first form is also submitted that is unexpected. Looks like I miss something important.
How to prevent first form submit when submitting the second?
Thank you
Simplified example is here
import { createPortal } from "react-dom";
const Portal = ({ children, elm }) => createPortal(children, elm);
export default function App() {
return (
<div className="App">
<form
onSubmit={(e) => {
e.preventDefault();
alert("submit 1");
}}
>
First form <input type="text" value="1" />
<Portal elm={document.querySelector("body")}>
Second form{" "}
<form
onSubmit={(e) => {
e.preventDefault();
alert("submit 2");
}}
>
<input type="text" value="2" />
<input type="submit" value="submit 2" />
</form>
</Portal>
</form>
</div>
);
}
I had the same problem, as #EisaRezaei said in the first comment, using e.stopPropagation() in the form inside the portal, and submit type buttons, everything worked fine
I have an React form.
This form have a button.
This is the submit button.
If i click this button execute the first function (submitHandler)which pointer is on the form.
I want add a second button to the form the "back button".
This button should execute an other function but not the first function
Both button should be on the same form
Form.js
import React, { useState } from "react";
import "./Form.css";
const Form = (props) => {
const submitHandler = (event) => {
event.preventDefault();
console.log('Some console log now from Submit Hanlder')
};
const secondFunction = event =>{
console.log('Some other console log')
}
return (
<form onSubmit={submitHandler}>
<div className="new-expense__controls">
<div className="new-expense__control">
<label>Title</label>
<input type="text" />
</div>
<div className="new-expense__control">
<label>Amount</label>
<input type="number" />
</div>
<div className="new-expense__control">
<label>Date</label>
<input type="date" />
</div>
<div className="new-expense__actions">
<button type="submit">Submitting</button>
<buton>Second button....</buton>
</div>
</div>
</form>
);
};
export default Form;
just use type="button":
<button type="button">Second button....</button>
You can add a onClick event to the second button to execute the secondFunction:
<button onClick={() => secondFunction()}>Second button....</button>
Note: the onClick event in reactjs is with a Capital letter C.
const secondFunction = event => {
event.preventDefault();
console.log('Some other console log')
}
I am trying to take input values from text box and displays every comment in new line.
constructor(props) {
super(props);
this.displayCmnts=this.displayCmnts.bind(this);
this.updateCmnts=this.updateCmnts.bind(this);
this.state={
comments:'',
cmntCount:0,
prevCm:''
}
}
render(){
let c=(this.state.prevCm)
return (
<div className="App">
<h3>enter comments</h3>
<input type="text" id="txt-cmnt" vlaue={this.state.comments} onChange=
{this.updateCmnts} placeholder="enter"/>
<br/>
<button onClick={this.displayCmnts}>submit</button>
<br/>
{c+<br/>}
</div>
);
}
updateCmnts(e){
this.setState({comments:e.target.value});
}
displayCmnts(){
this.setState({cmntCount:1});
this.setState({comments:this.state.comments});
var c=this.state.comments+"\n";
this.setState({prevCm:this.state.prevCm+c});
}
when do this it {c+} outputs my-input-comments [object object]
I believe if you change the code to {c}<br/> it should work
So, I want to create a card component many times I want on a click of a button but the problem is that it just creates the cardComponent one time. What should I do? Is there anyone that I could create these.
This is the code:
class GCARD extends Component {
constructor(props) {
super(props);
// This state changes so the card is generated
this.state = {
change: '',
}
this.handel = this.handel.bind(this);
}
handel = (element) => {
// This is the element which creates the card.
element = <CardComponent data="Give a little detail about the thing's you like!"
heading= "Create Your Own Card" image="./owl.jpg"/>
this.setState({
change: element
});
}
render() {
return (
<div>
<div className="form-div">
<div>
<p className="form-title">Create Your Own Card</p>
<hr/>
</div>
<div>
<label className="form-label">Main Heading </label>
<input className="form-input" type="text"/>
<br/><br/>
<label className="form-label">Some Info</label>
<input className="form-input1" type="text"/>
<br/><br/>
{/* Just focus on the button */}
<button onClick={this.handel} className="form-btn">CREATE</button>
</div>
</div>
<div>
{this.state.change}
</div>
</div>
);
}
}
Your current code only replaces the element. You want to use an array instead e.g. use it like this
this.setState({
change: this.state.change.concat(element)
});
The problem on your code is that you override every time the same component. I changed your code for you to fix this:
class GCARD extends Component {
constructor(props) {
super(props);
// This state changes so the card is generated
this.state = {
change: [],
}
this.handel = this.handel.bind(this);
}
handel = (element) => {
// This is the element which creates the card.
let components = this.state.change;
element = <CardComponent data="Give a little detail about the thing's you like!"
heading="Create Your Own Card" image="./owl.jpg" />
components.push(element);
this.setState({
change: components
});
}
render() {
return (
<div>
<div className="form-div">
<div>
<p className="form-title">Create Your Own Card</p>
<hr />
</div>
<div>
<label className="form-label">Main Heading </label>
<input className="form-input" type="text" />
<br /><br />
<label className="form-label">Some Info</label>
<input className="form-input1" type="text" />
<br /><br />
{/* Just focus on the button */}
<button onClick={this.handel} className="form-btn">CREATE</button>
</div>
</div>
<div>
{this.state.change.map(comp => (comp))}
</div>
</div>
);
}
}
There are many different ways you can approach this. I would recommend binding an onClick handler to your create button which would push an object into an array, which then, in turn, you could use to set the state. Then in your render, map over the state to return each card. Remeber you may need to use appropriate CSS for margins, inline-flex etc.
eg:
clickHander(){
let arr = [];
arr.push({
<card/>
})
this.setState({change: arr})
}
render(){
const card = this.state.change.map((card) => { return ( card )})
return (
<div>
{card}
</div>
)
}
Hope this helps!
I'm writing a page that converts temperature from Celcius to Fahrenheit.
User gives temperature in celcius in the first input field,
then onChange should call function convertCelciustoFahr.
The convertCelciustoFahr changes the state.fahrenheit by function this.setState() and temperature in fahrenheit should update to the second input field.
class App extends Component {
constructor(props){
super(props);
this.state = {
//Temperature in fahrenheit
fahrenheit: 0,
//Temperature in celcius
celcius: 0,
};
//Binding
this.convertCelciustoFahr = this.convertCelciustoFahr.this;
}
//Converts celcius to fahrenheit
convertCelciustoFahr(event){
var celcius = Number(event.target.value);
this.setState( function(state,props){
return{
fahrenheit: (celcius-32)/(5/9),
}
}
)
}
render() {
return (
<div className="App">
<h1>Celcius to Fahrenheit converter</h1>
<form id="conversion">
<input className="Celcius" placeholder="°C" onChange={this.convertCelciustoFahr} />
<p>=</p>
<input className="Fahrenheit" value={this.state.fahrenheit} placeholder="°F" />
</form>
</div>
);
}
}
export default App;
Here is the html:
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root">
<div data-reactroot="" class="App">
<h1>Celcius to Fahrenheit converter</h1>
<form id="conversion">
<input class="Celcius" placeholder="°C">
<p>=</p>
<input class="Fahrenheit" value="0" placeholder="°F">
</form>
</div>
</div>
It seems that Javascript is not enabled and the onChange event is not triggered.
Why onChange not updating value to the fahrenheit input field?
bind using
this.convertCelciustoFahr = this.convertCelciustoFahr.bind(this);