Morning!
I have a component setup like below (React Native)
I am trying to trigger a function in the class <Child> by pressing a button in a sibling component. In the parent component, <Parent> I am setting a ref to the <Child> component. The ref is always null so I am missing something here, but not sure what.
If I attach the ref to another component, say a <TouchableOpacity> at the same level in the DOM, the ref exists? I am not sure whether it is because my <Child> function is custom or not.
Using RN 0.6.
class Parent extends React.Component {
...
fireChildFunction = () => {
if(!this.childRef) return null;
this.childRef.childFunction()
}
render(){
return (
<Parent>
<Child ref={(ref) => {this.childRef = ref}/>
<ButtonChild onPress={this.fireChildFunction} />
</Parent>
)
}
}
...
class Child extends React.Component {
childFunction() {
// do something
}
render() {
return (
<View>
...
</View>
)
}
}
Any help would be greatly appreciated!
Thanks
Please check the below example where we called sibling function with the help of ref.
Parent Component
import React, {useEffect, useState} from 'react';
import Child from "./Child";
import Sibling from "./Sibling";
export default class Parent extends React.Component{
constructor(props){
super(props);
this.childRef = React.createRef();
}
fireChildFunction = () => {
alert('called from fireChildFunction');
if (!this.childRef) return null;
this.childRef.current.childFunction()
};
render()
{
return (
<div>
<Child ref={this.childRef}/>
<Sibling onPress={this.fireChildFunction}/>
</div>
);
}
}
Child Component
import React, {useEffect, useState} from 'react';
export default class Child extends React.Component {
childFunction = () =>{
alert('called from childFunction');
};
render() {
return (
<div>
</div>
);
}
}
Sibling Component
import React, {useEffect, useState} from 'react';
export default class Sibling extends React.Component {
onClick = () => {
this.props.onPress();
};
render() {
return (
<div>
<button onClick={this.onClick}>Click from Sibling</button>
</div>
);
}
}
I figured out the issue. I am using Redux and when you use the connect function it create a HOC wrapper. Therefore the ref was not being assigned to the <Child> component. I had to add {forwardRef: true} as the 4th argument in the connect function that wrapped my <Child> component. Hope this can help someone one day!
for reference:
https://itnext.io/advanced-react-redux-techniques-how-to-use-refs-on-connected-components-e27b55c06e34
Related
I have a class based parent component like below
import React from "react";
import ReactDOM from "react-dom";
import FunChild from "./FunChild";
class App extends React.Component {
constructor(props) {
super(props);
this.childRef = React.createRef();
this.parentmethodFun = this.parentmethodFun.bind(this);
}
parentmethodFun() {
this.childRef.current.childmethod();
}
render() {
return (
<div>
<FunChild />
<button type="button" onClick={this.parentmethodFun}>
function
</button>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("container"));
the funChild.js file
import React from "react";
function FunChild(props) {
childmethod() {
console.log("child method is called");
}
return (<div>This is child ...!</div>);
}
export default FunChild;
if that child was a class component I can very easily use ref={this.childRef} to access child method.
But, it's a functional component and It was giving lot of problems. Can anyone please help me on this.
reference project link https://codesandbox.io/s/react-playground-forked-74xzn?file=/index.js
You should avoid this kind of relation because it is not the way how react works. In React you should pass everything from up to bottom. But if you reale want to achieve something like this you can use reference forwarding and imperative handler hook. E.g:
import { Component, forwardRef, createRef, useImperativeHandle } from "react";
const Child = forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
childMethod() {
console.log("child method is called");
}
}));
return <div>This is child ...!</div>;
});
class App extends Component {
constructor(props) {
super(props);
this.childRef = createRef();
this.parentmethodFun = this.parentmethodFun.bind(this);
}
parentmethodFun() {
this.childRef.childMethod();
}
render() {
return (
<div>
<Child ref={(ref) => (this.childRef = ref)} />
<button type="button" onClick={this.parentmethodFun}>
function
</button>
</div>
);
}
}
Personally, i think you should rethink your application structure as it is very likely that there is a better solution than this trick.
The Scegli component is assigned to the App comp variable and then rendered in App render as a variable. However, the props assigned don't work: if I type in the input box, the value is frozen.
What am I doing wrong?
If I just move the <Scegli>...</Scegli> directly into the render (without assigning to a variable) it works as expected.
App.js
import React, { Component } from 'react';
import './App.css';
import Scegli from './components/Scegli';
class App extends Component {
constructor() {
super();
this.state = {
valore: 'Single'
}
this.comp = <Scegli value={this.state.valore} handleChange={this.setValoreHandler} />;
}
setValoreHandler = e => {
this.setState({
valore: e.target.value
});
}
render() {
return (
<div>
{this.comp}
</div>
);
}
}
export default App;
Scegli.js
import React, { Component } from 'react';
class Scegli extends Component {
render() {
return (
<div>
<input value={this.props.value} onChange={this.props.handleChange} />
Valore scelto: {this.props.value}
</div>
);
}
}
export default Scegli;
this.comp is declared once, at the component's mount and stays in that state. You are not updating/re-rendering it anywhere, that's why it remains unchanged.
You could either:
move the JSX component directly to render:
<div>
<Scegli value={this.state.valore} handleChange={this.setValoreHandler} />
</div>
or
update the class variable with every input change (not recommended though):
setValoreHandler = (e) => {
this.comp = <Scegli value={e.target.value} handleChange={this.setValoreHandler} />;
this.forceUpdate();
}
(I could be wrong) but when you define this.comp in the constructor() it is only loaded once with the default state. The constructor() is not called on re-render (similar to componentWillMount()). So that is why it is frozen as the updated state is never sent this.comp
Instead of this.comp in render do
return (
<div>
<Scegli value={this.state.valore} handleChange={this.setValoreHandler}/>
</div>
);
In my project I have App.js that is Parent component. And for Parent component there are two child components those are Childone component and Childtwo component. Now I am trying to pass data from Childone component to Childtwo component. Someone please tell me to achieve this
This is App.js
import React, { Component } from "react";
import Childone from "./Childone/Childone";
import Childtwo from "./Childtwo/Childtwo";
class App extends Component {
render() {
return (
<div className="App">
<Childone />
<Childtwo />
</div>
);
}
}
export default App;
This is Childone
import React, { Component } from "react";
class Childone extends Component {
render() {
const Employs = ["Mark", "Tom"];
return <div className="Childone" />;
}
}
export default Childone;
This is Childtwo
import React, { Component } from "react";
class Childtwo extends Component {
render() {
return <div className="Childtwo" />;
}
}
export default Childtwo;
If you feel I am not clear with my doubt, please put a comment.
There are two ways of doing it.
By passing data from Childone to Parent through callback and from Parent to Childtwo as prop. Thereby letting parent be the intermediatory.
By creating a context at the parent and let Childone be the producer and Childtwo be the consumer.
Context is used to avoid prop drilling. Also frequent update of context values isn't considered as a good practice.
Also, for your case we can go with approach ( 1 ).
You can enter data in Childone and see the data reflect in Childtwo in this sandbox.
Are you familiar with React's unidirectional data flow? I would try to create a mental model in your head of having the Parent be the container/controller that passes the required information into your children.
So in this case you would either want the data to originate from Parent or have some event handler associated with the data in Child1. If the latter, attach a callback function from Parent to Child1 that accepts the data as an argument to then be passed into Child2.
best solution is is to use redux. If you are not familiar with redux then you can follow below approach :
import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";
class App extends Component {
constructor() {
super();
this.state = {
number:[0]
};
}
render() {
return(
<div>
<div>Parent Componet</div>
<Child1 passToChild={this.passToChild.bind(this)}> </Child1>
<Child2 number={this.state.number}></Child2>
</div>
)
}
passToChild(number){
this.setState({
number : [...this.state.number,number]
});
}
}
class Child1 extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<div>Child1</div>
<button onClick={() => this.sendToSibiling()}>
Send data to sibiling
</button>
</div>
);
}
sendToSibiling() {
this.props.passToChild(Math.random());
}
}
class Child2 extends Component {
constructor(props) {
super(props);
}
render(){
return(
<div>
<div>Child 2</div>
<span>data from sibiling : {...this.props.number}</span>
</div>
)
}
}
I'm kinda new to react and thought that in the constructor function, using super(props) can fully receive the props that passed by parents. But however, I can't get the string test from my parent component.
So in the parent component, I pass the string "test" as props
import React from 'react';
import Post from '../components/post';
import "../components/css/post.css"
class Bulletin extends React.Component {
render()
{
console.log(this.props);
return (
<div>
<Post test={"sent from parent"}/>
</div>
);
}
}
export default Bulletin;
And then in Post.js, I print the props in two places:
import React, { Component } from 'react';
export default class Edit extends Component {
constructor(props) {
super(props);
console.log(props);
}
render() {
console.log(this.props);
return (
<div className="editor" onClick={this.focus}>
</div>
);
}
}
The two outputs are both {className: "editor"} which is not what I need. I need the string {test: "sent from parent"} and don't know why this doesn't works for me.
I wanted to create a very simple app containing a button. When I click on it it should change it's name and should change it's state to: isDisabled:true. I accomplished this by writing button inline, giving it an OnClick and so on, but I wanted to try this with stateless component with the same functionality, however I'm totally stuck.
import React, { Component } from 'react';
import './App.css';
class App extends Component{
constructor(){
super()
this.state = {name:'Hey buddy click me',
isDisabled:false,
}
}
render() {
return (
<div>
<MyButton handleClick={this.handleClick.bind(this)}></MyButton>
</div>
)
}
handleClick = () => {
this.setState ({
name:'Dont click!',
isDisabled:true,
});
}
}
const MyButton = (name, isDisabled) => <button onClick={this.handleClick.bind(this)}>{name}</button>
export default App;
You need to pass name, isDisabled too with handleClick as props if you want to access then in MyButton component.
Though name can also be passed as children. But as i feel you are learning start passing it as props.Then in future you can use children.
import React, { Component } from 'react';
import './App.css';
class App extends Component{
constructor(){
super()
this.state = {name:'Hey buddy click me',
isDisabled:false,
}
}
render() {
return (
<div>
<MyButton
name={this.state.name}
isDisabled={this.state.isDisabled}
handleClick={this.handleClick.bind(this)}>
</MyButton>
</div>
)
}
handleClick = () => {
this.setState ({
name:'Dont click!',
isDisabled:true,
});
}
}
//here we need to receive props from parent components, if we need to use here
const MyButton = ({name, isDisabled, handleClick}) => <button onClick={handleClick}>{name}</button>
export default App;