I have a switch button that I want to copy ten times but when I copy the button to new div it does not let me click on second button onwards, I can change state of one first button only. Here is my code
class App extends Component {
handleSwitch = e => console.log(e.target.checked);
render() {
return (
<div>
<div>
<p className="title">source</p>
<label className="label">Button</label>2
<SwitchButton
onChange={this.handleSwitch}
title="SwitchButton"
data-name="vd"
/>
</div>
<div>
<label className="label">Button2</label>
<SwitchButton
onChange={this.handleSwitch}
title="SwitchButton2"
data-name="vd1"
/>
</div>
</div>
);
}
}
here is my live demo : https://stackblitz.com/edit/react-ts-9n4lwa?file=index.tsx
You should set a unique switchButtonID in each SwitchButton
import React, { Component } from 'react';
import { render } from 'react-dom';
import SwitchButton from './Hello';
import './style.scss';
class App extends Component {
handleSwitch = e => console.log(e.target.checked);
render() {
return (
<div>
<div>
<p className="title">Precursor source</p>
<label className="label">Ch1_PulsingValveActivationlnSw</label>
<SwitchButton
switchButtonID={1}
onChange={this.handleSwitch}
title="SwitchButton"
data-name="vd"
/>
</div>
<div>
<label className="label">Ch1_PulsingValveActivationlnSw</label>
<SwitchButton
switchButtonID={2}
onChange={this.handleSwitch}
title="SwitchButton2"
data-name="vd1"
/>
</div>
</div>
);
}
}
render(<App />, document.getElementById('root'));
Related
I have 2 react components -
import React, {Component} from 'react'
import './App.css';
import ContactCard from './components/ContactCard'
class App extends Component {
render() {
return (
<div className="App-header">
<ContactCard name="hi 1" age={36} email="hu#yahoo.com"/>
<ContactCard name="hi 2" age={67} email="hi#yahoo.com"/>
<ContactCard name="hi 2" age={42} email="he#yahoo.com"/>
</div>
);
}
}
export default App;
import React, { Component } from "react";
class ContactCard extends Component {
state = {
showAge: false,
};
setAge = () => {
this.setState({
showAge: !this.state.showAge,
});
};
render() {
return (
<div className="contactCard">
<div className="userDetails">
<h2>Name: {this.props.name}</h2>
<p>Email: {this.props.email}</p>
<button onClick={this.state.setAge}>Show Age</button>
{this.state.showAge && <p>Age: {this.props.age}</p>}
</div>
</div>
);
}
}
export default ContactCard;
Toggle button is not working. i have set the state before render method. its not mandatory to set the state in the constructor.
Now the error is gone but still toggle button not working.
Whats going wrong?
You are setting state the wrong way. It should be:
setAge = () => {
this.setState({
showAge: !this.state.showAge
});
};
Edit
In order to make your app work as expected, you also have to set the click handler properly:
<button onClick={this.setAge}>Show Age</button>
You have to update your code its this.setAge not this.state.setAge
render() {
return (
<div className="contactCard">
<div className="userDetails">
<h2>Name: {this.props.name}</h2>
<p>Email: {this.props.email}</p>
<button onClick={this.setAge}>Show Age</button>
{this.state.showAge && <p>Age: {this.props.age}</p>}
</div>
</div>
);
}
Hello I have a question about my code.
In the SearchBar.js, I got error, which is undefined props.
I have two question, if it is undefined why the if statement does not invoke and
I don't understand why props is undefined because I think I pass props properly from parent component to child component( SearchBar.js)
enter code here
import React from 'react';
import ReactDOM from 'react-dom';
import SearchBar from './components/SearchBar';
import ShopList from './components/ShopList';
class App extends React.Component {
state ={ title: [], text: ''}
componentDidMount(){
this.setState({title:["javascript","react","redux","c++","java"]})
}
handleSubmit = (e) =>{
e.preventDefault();
}
handleChange = (e) => {
this.setState({text: e.target.value})
}
render() {
return (
<div>
<div className="split left">
<div className="centered">
<SearchBar handleSubmit={this.handleSubmit} handleChange={this.handleChange} userinput={this.state.text}/>
<ShopList shops={this.state.title}/>
</div>
</div>
<div className="split right">
<div className="centered">
</div>
</div>
</div>
)
}
}
ReactDOM.render(<App />, document.querySelector('#root'));
SearchBar.js
import React from 'react';
class SearchBar extends React.Component{
constructor(props){
super(props);
}
render(){
if(!this.props){
return <div>Loding..</div>
}
return (
<form className="ui form" onSubmit={this.props.handleSubmit}>
<div className="inline field">
<input onChange={this.props.handleChange} className="myinput" type="text" style={{width: '85%'}} value={props.userinput}/>
<button className="ui primary button" type="submit">button</button>
</div>
</form>
)
}
}
export default SearchBar;
I want that on clicking the button X its value X pass to the result function(same with O) where I can store it in a variable. I don't know how to pass this value on calling result and access it there. I tried to find many answers but none worked.
I'm absolutely new to react. Please help!! Thanks!!
This is code snippet
import React, { Component } from 'react';
import './App.css';
import { Link } from 'react-router-dom';
class App extends Component {
render() {
return (
<div>
<h1 align="center">Welcome to TicTacToe</h1>
<br></br><br></br><br></br><br></br>
<div class="front">
Choose your sign !!
<CheckBox type='submit' value='X' id='x' onSubmit={'how to pass value'}/>
<CheckBox type='submit' value='O' id='o' onSubmit={'how to pass value'}/>
</div>
<br></br>
<Link to= "game"><p class="wrap"><button class="button">GO</button></p></Link>
{this.props.children}
</div>
);
}
}
class CheckBox extends Component{
result(i){
//what to access value
}
render(){
return (
<div className={'check-field'}>
<button type={this.props.type} value={this.props.value} name={this.props.name} id={this.props.id}>{this.props.value}</button>
</div>
);
}
}
export default App;
I'm not sure if I understand your problem properly, but to get a value from a child input component (input/button/textarea) in its parent, just pass a prop with a function which will be called in the child on any onClick/onChange callback function. Here's a little example:
class App extends React.Component {
onSubmit(value) {
// I have the button value here!
console.log(value);
}
render() {
return (
<div>
<Button value="X" onSubmit={this.onSubmit} />
<Button value="O" onSubmit={this.onSubmit} />
</div>
)
}
}
class Button extends React.Component {
onClick(event) {
const value = event.target.value;
this.props.onSubmit(value);
}
render() {
return (
<button value={this.props.value} onClick={e => this.onClick(e)}>
{this.props.value}
</button>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app" />
I hope this solves your problem!
You can store for each checkbox value in state of App. Then, when checkbox is subimtted value it will call handleSubmit and event parameter e holds value and id of checkbox. In your case you can examine if it's X or Y and setState accordingly. This will re-render checkboxes who will via props get proper values.
import React, { Component } from 'react';
import './App.css';
import { Link } from 'react-router-dom';
class App extends Component {
state = {
X : false,
Y : false
}
handleSubmit = (e) => {
if(e.target.id === 'x') {
this.setState({X:true});
} else {
this.setState({Y:true});
}
}
render() {
const { X,Y } = this.state;
return (
<div>
<h1 align="center">Welcome to TicTacToe</h1>
<br></br><br></br><br></br><br></br>
<div class="front">
Choose your sign !!
<CheckBox type='submit' value={X} id='x' onSubmit={this.handleSubmit}/>
<CheckBox type='submit' value={Y} id='o' onSubmit={this.handleSubmit}/>
</div>
<br></br>
<Link to= "game"><p class="wrap"><button class="button">GO</button></p></Link>
{this.props.children}
</div>
);
}
}
class CheckBox extends Component{
render(){
const {value, type, name, id} = this.props;
return (
<div className={'check-field'}>
<button type={type} value={value} name={name} id={id}>{value}</button>
</div>
);
}
}
export default App;
I'm using Reactjs. I want to render another page on the same place where main page is render. Below is code for my app.js file.
import React, { Component } from 'react';
import Online from './components/userview';
import Login from './components/login';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.handleLogin = this.handleLogin.bind(this);
this.state = { LoggedIn: false };
}
handleLogin(props) {
this.setState = { LoggedIn: true };
console.log(this.setstate.LoggedIn);
}
render() {
return (
<div className="App">
<div className="header col-lg-12">
<img
src={require('../src/images/logo.png')}
style={{ maxWidth: '80vh', maxHeight: '100vh' }}
/>
</div>
<button
type="button"
class="btn btn-primary"
onClick={this.handleLogin}
>
Sign In
</button>
<button type="button" class="btn btn-info">
Join Live chat
</button>
<Login />
</div>
);
}
}
export default App;
and here is the page which I want to render at the place to app.js.
import React, { Component } from 'react';
export default class Login extends Component {
render() {
return (
<div className="login">
<form>
<div>
<label>Your ID:</label>
<input type="text" ref="id" />
</div>
<br />
<br />
<input type="submit" value="submit" />
</form>
</div>
);
}
}
How to render this page when I click on login button?
In your App render method, you can do :
if(this.state.LoggedIn) return <Login />
Add the below code inside the App component's render method.
render(){
if(this.state.LoggedIn)
return <Login />;
else {
return(
<div className="App">
....
</div>
);
}
}
Check the working code on CodeSandbox
I keep getting a message that the item I'm trying to access via props is undefined. Can you please tell me why it's not working?
Here is where the instance where the props are attempting to be passed... I'm specifically talking about the tellus and yourTrial props.
import React from 'react'
import Info from './components/Info'
import Upsell from '../../../general/components/order/components/Upsell'
import FormTwo from '../../../general/components/forms/FormTwo'
import Footer from '../../../cbd-desktop/components/layout/Footer'
export default class Order extends React.Component {
render() {
return (
<div>
<div>
<div style={styles.header}>
<img style={styles.leaf} src="./resources/desktop-img/leaves_top.png" />
<img style={styles.logo} src="./resources/desktop-img/logo_white.png" />
</div>
<div style={styles.wrapper}>
<div style={styles.leftWrapper}>
<Info />
<Upsell styles={upsellStyles} />
</div>
<FormTwo styles={formStyles} tellus="Tell us where to send" yourTrial="YOUR TRIAL BOTTLE"} />
</div>
</div>
<Footer style={styles.footer}/>
</div>
)
}
}
And here is where I am trying to display these values on the child... towards the top in two h2s
import React from 'react'
import { connect } from 'react-redux'
import { stepTwoSubmit, saveBillingData } from
'../../actions/formStepTwoActions'
import { addReceiptProduct } from '../../actions/receiptActions'
import FormTwoInputs from './components/FormTwoInputsComponent.jsx'
import Throbber from '../throbber/Throbber'
import FormWarning from './components/FormWarningComponent.jsx'
import Button from '../../../cbd-desktop/components/layout/Button'
const mapStateToProps = state => ({
state:state,
config:state.config,
downsellProduct:state.downsell.downsellProduct || {},
receiptProducts:state.receipt.receiptProducts || []
})
const mapDispatchToProps = {
stepTwoSubmit,
saveBillingData,
addReceiptProduct
}
#connect(mapStateToProps, mapDispatchToProps)
export default class FormTwo extends React.Component {
constructor(props) {
super(props)
componentWillReceiveProps(nextProps) {
let formTwoResponse = nextProps.state.stepTwo.formTwoResponse
this.checkOrderStatus(formTwoResponse)
}
componentDidMount() {
this.fillMainOrder()
this.calculateViewers()
this.calculateTimer()
}
render() {
let { state, props, inputs, onInputFocus, saveInputVal, styles } = this,
CustomTag = props.labels ? 'label' : 'span',
{ submitting, formWarning } = state,
{ invalidInputID, text, visible } = formWarning
return (
<div style={styles.formWrapper}>
<p style={styles.yellowBanner}>{this.state.viewers} people viewing this product right now</p>
<div style={styles.formInnerWrapper}>
<div style={styles.headerWrapper}>
<h2 style={styles.header}>{this.props.tellus}</h2>
<h2 style={styles.header}>{this.props.yourTrial}</h2>
</div>
<div style={styles.weAccept}>
<p style={styles.weAcceptText}>We Accept:</p>
<img style ={styles.cardImage} src="resources/desktop-img/cards.png" />
</div>
<form onSubmit={this.submit}>
<FormTwoInputs onInputFocus={onInputFocus} saveInputVal={saveInputVal} CustomTag={CustomTag} styles={styles} />
<FormWarning visible={visible} invalidInputID={invalidInputID} text={text} />
<Button style={styles.button} buttonText="RUSH MY TRIAL" />
</form>
</div>
<img src="resources/desktop-img/secure.png" />
<div style={styles.urgencyWrapper}>
<div style={styles.urgencyTextWrapper}>
<span style={styles.redText}>{this.state.viewers} people are viewing this offer right now -</span>
<span style={styles.blueText}>{this.state.counter}</span>
</div>
<p style={styles.blueText}>Claim Your Bottle Now</p>
</div>
<Throbber throbberText='Confirming your shipment...' showThrobber={submitting} />
</div>
)
}
}