I want to change the state of the component A from an onClick handler of a button that is located in the component B, I currently have my code like this:
Component A:
import React, { Component } from 'react'
import ComponentB from './component_b'
class ComponentA extends Component{
constructor(props){
super(props);
this.state=({
allergies11:'',
allergies12:'',
allergies13:'',
allergies14:''
})
this.onCCDSubmit = this.onCCDSubmit.bind(this);
}
onCCDSubmit(e){
e.preventDefault()
this.setState({
allergies11:'Penicillin',
allergies12:'2/13/10',
allergies13:'Hives',
allergies14:'moderate'
})
this.on
}
render(){
return(
<div>{this.state.allergies11} {this.state.allergies12} {this.state.allergies13} {this.state.allergies14}
<ComponentB />
<div>
)
}
}
export default ComponentA;
Component B:
import React, { Component } from 'react';
class ComponentB extends Component{
render(){
return(
<button type="button" onClick={this.onCCDSubmit}>Import</button>
)
}
}
export default ComponentB;
how can i achieved this, any help is welcome!
You can pass a callback to your Component B, which would trigger the callback upon click...
Component B:
import React, { Component } from 'react';
class ComponentB extends Component{
render(){
return(
<button type="button" onClick={this.props.clickHandler}>Import</button>
)
}
}
export default ComponentB;
Component A:
import React, { Component } from 'react'
import ComponentB from './component_b'
class ComponentA extends Component{
constructor() {
super();
this.handleClickB = this.handleClickB.bind(this);
}
handleClickB(e) {
e.stopPropagation();
this.setState({
// new state you want to set...
});
}
render(){
return(
<div>{this.state.allergies11} {this.state.allergies12} {this.state.allergies13} {this.state.allergies14}
<ComponentB clickHandler={this.handleClickB} />
<div>
)
}
}
export default ComponentA;
Related
I am new in React Js and want to call the parent method from the child method.
There is a class login.jsx when someone clicks on submits button then a method changeUser in FirstPage.jsx should be invoked but when I try the online solution I am getting same error again and again that this.props.changeUser is not a function.
Login.jsx (child class)
import React, { Component } from 'react';
class Login extends Component {
constructor(props){
super(props);
this.state ={
user : null
}
this.onNameChange = this.onNameChange.bind(this);
this.onHandleClick = this.onHandleClick.bind(this);
}
onNameChange = (event)=>{
this.setState({
user:event.target.value
})
}
onHandleClick=(event)=>{
event.preventDefault();
this.props.changeUser("hello");
}
render() {
return (
<form>
<h3>Sign In</h3>
<div>
<label>User Name</label>
<input type="text" name="userId" placeholder="Enter User name" onChange ={this.onNameChange}/>
</div>
<button className="btn btn-primary btn-block" onClick={this.onHandleClick}>Submit</button>
</form>
);
}
}
export default Login;
FirstPage.jsx (parent class)
import React, { Component } from 'react';
import Login from './Login';
class Firstpage extends Component {
constructor(props){
super(props);
this.state=
{
user:null
}
this.changeUser = this.changeUser.bind(this)
}
changeUser =(x)=>{
console.log(x)
}
render() {
return (
<div>
<Login changeUser ={this.changeUser}/>
</div>
);
}
}
export default Firstpage;import React, { Component } from 'react';
import Login from './Login';
class Firstpage extends Component {
constructor(props){
super(props);
this.state=
{
user:null
}
this.changeUser = this.changeUser.bind(this)
}
changeUser =(x)=>{
console.log(x)
}
render() {
return (
<div>
<Login changeUser ={this.changeUser}/>
</div>
);
}
}
export default Firstpage;
I am getting an error that TypeError: this.props.changeUser is not a function
Please help me.
try to avoid using a lambda expression within you class component. Just create a simple member function:
import React, { Component } from 'react';
import Login from './Login';
class Firstpage extends Component {
constructor(props){
super(props);
this.state=
{
user:null
}
this.changeUser = this.changeUser.bind(this)
}
changeUser(x) // Try to declare this as member function
{
console.log(x)
}
render() {
return (
<div>
<Login changeUser ={this.changeUser}/>
</div>
);
}
}
export default Firstpage
You are making a mistake here while binding , inside constructor
//WRONG
this.onNameChange = this.onNameChange.bind(this);
this.onHandleClick = this.onHandleClick.bind(this);
//RIGHT
this.onNameChange = onNameChange.bind(this);
this.onHandleClick = onHandleClick.bind(this);
CODE:
constructor(props){
super(props);
this.state ={
user : null
}
this.onNameChange = onNameChange.bind(this);
this.onHandleClick = onHandleClick.bind(this);
}
I have a requirement in which I have to call a function present in a child component from parent component using React.createRef() but the problem here is that it is multilevel child.
I'm able to call a function present in 'ChildComponent1' component but not able to call a function present in 'ChildComponent2' component from 'Parent' component. Please tell me a correct way to do this.
This is my parent.js file
import React, { Component } from 'react';
import ChildComponent1 from './ChildComponent1';
class ParentComponent extends Component {
constructor(props) {
super(props);
this.childRef = React.createRef();
}
callFunctionFromChild = () => {
this.ref.current.doSomething()
}
render() {
return (
<div>
<ChildComponent1 ref={this.childRef} />
<button onClick={()=>{this.callFunctionFromChild()}}> Click Me <button>
</div>
);
}
}
export default ParentComponent;
This is my ChildComponent1.js file:
import React, { Component } from 'react';
import ChildComponent2 from './ChildComponent2';
class ChildComponent1 extends Component {
render() {
return (
<div>
<ChildComponent2 ref={this.props.ref} />
</div>
);
}
}
export default ChildComponent1;
and this is my inner ChildComponent2.js file:
import React, { Component } from 'react';
class ChildComponent2 extends Component {
doSomething = () => {
console.log("Something is done!!");
}
render() {
return (
<div>
My Child Component
</div>
);
}
}
export default ChildComponent2;
import React from 'react';
import './App.css';
import ChildComponent from './component/childComponent';
class ParentComponent extends React.Component{
constructor(){
super();
this.state = {
isShowLastScrn:false
}
}
render(){
return (
<div className="App">
<childComponent />
</div>
);
}
}
export default ParentComponent;
import React from 'react';
import './childComponent.css';
class ChildComponent extends React.Component{
constructor(props){
super(props);
this.state={
unattempt:0,
}
}
render(){
return(
<div className='wrapper'>
<button type="button" className="btn" onClick={this.props.clickYestBtn}>Yes</button>
<button type="button" className="btn" onClick={this.props.clickNoBtn}>No</button>
</div>
);
}
}
export default ChildComponent;
I am having two buttons on child component. Both buttons have separate click event. How to pass this function from child component to parent component in react js.
Thanks in advance.
Create a reference of child in parent and then you can call easily.
this should work.
import React from 'react';
import './App.css';
import ChildComponent from './component/childComponent';
class ParentComponent extends React.Component{
constructor(){
super();
this.state = {
isShowLastScrn:false
}
}
clickYestBtn=()=>
{
}
clickNoBtn=()=>
{
}
render(){
return (
<div className="App">
<childComponent clickYestBtn={this.clickYestBtn} clickNoBtn={this.clickNoBtn}/>
</div>
);
}
}
export default ParentComponent;
import React from 'react';
import './childComponent.css';
class ChildComponent extends React.Component{
constructor(props){
super(props);
this.state={
unattempt:0,
}
}
render(){
return(
<div className='wrapper'>
<button type="button" className="btn" onClick={this.props.clickYestBtn}>Yes</button>
<button type="button" className="btn" onClick={this.props.clickNoBtn}>No</button>
</div>
);
}
}
export default ChildComponent;
import React from 'react';
import Multiselect from 'react-bootstrap-multiselect';
class Test2 extends React.Component {
constructor(props){
super(props)
this.state = {
list: [{value:'One',selected:true},{value:'Two'},{value:'Three'},{value:'Four',label:'Four Label'}]
}
}
render(){
return (
<Multiselect data={this.state.list} multiple />
);
}
}
export default Test2;
Here i am using react-bootstrap-multiselect
The ui is not coming properly.
Am i missing something?
PLease have a look.
try removing label attribute,
import React from 'react';
import Multiselect from 'react-bootstrap-multiselect';
class Test2 extends React.Component {
constructor(props){
super(props)
this.state = {
list: [{value:'One',selected:true},{value:'Two'},{value:'Three'},{value:'Four'}]
}
}
render(){
return (
<Multiselect data={this.state.list} multiple />
);
}
}
export default Test2;
I'm trying to call a redux action from the onClickHandler function which is passed to a functional component as props but nothing happens.
I'm passing the clickHandler as a prop to the child Component and handling it in the ParentComponent as Child Component is a functional component.
Code for ParentComponent
import React, { Component } from 'react';
import { connect,store } from 'react-redux';
// import statement for component
// import statement for redux actions
class ParentComponent extends Component {
constructor(props){
super(props);
this.clickHandler = this.clickHandler.bind(this);
}
clickHandler(data){
// call this.props.actions(data) here;
}
renderList(){
return <ChildComponent
key={field.name}
clickHandler={() => this.clickHandler(field.name)}
/>
})
}
render() {
return (
<div className="">
{this.renderList()}
</div>
);
}
}
export default connect(null, {
actions
})(ParentComponent);
Code for ChildComponent
const ChildComponent = (props) => {
return(
<span onClick={props.clickHandler} className="glyphicon glyphicon-sort"></span>
)
}
It would be better to pass the props to the child component and the child component onClick will pass the arguments to the function
Parent Component
import React, { Component } from 'react';
import { connect,store } from 'react-redux';
// import statement for component
// import statement for redux actions
class ParentComponent extends Component {
constructor(props){
super(props);
this.clickHandler = this.clickHandler.bind(this);
}
clickHandler(data){
// call this.props.actions(data) here;
}
renderList(){
return <ChildComponent
key={field.name}
name={field.name}
clickHandler={this.clickHandler}
/>
})
}
render() {
return (
<div className="">
{this.renderList()}
</div>
);
}
}
export default connect(null, {
actions
})(ParentComponent);
Child Component
const ChildComponent = (props) => {
return(
<span onClick={()=> props.clickHandler(props.name)} className="glyphicon glyphicon-sort"></span>
)
}