Hello I have a problem with calling a function passed as prop at the child component. Im trying to replicate my code with only the relevant lines of code:
class Parent extends Component {
constructor(props) {
super(props)
this.press = this.press.bind(this)
}
press(param) {
console.log(param)
}
renderItem = ({item}) => (
<Child item={item} press={this.press} />
)
render() {
return (
<FlatList renderItem={this.renderItem} />
)
}
}
class Child extends PureComponent {
handlePress(param) {
// do some stuff
// call parent function
this.props.press(param)
}
render() {
const { id } = item
return <Button onPress={() => this.handlePress(id)} />
}
}
At the moment when pressing the button nothing happens, I got this already working with something like this:
<Child press={(param) => this.press(param)} />
however this causes performance issues.
How can I make this work ?
After a while of testing I came to this solution:
class Parent extends Component {
press = (param) => {
console.log(param)
}
renderItem = ({item}) => (
<Child item={item} press={this.press} />
)
render() {
return (
<FlatList renderItem={this.renderItem} />
)
}
}
class Child extends Component {
handlePress(param) {
// do some stuff
// call parent function
this.props.press(param)
}
render() {
const { id } = item
return <Button onPress={() => this.handlePress(id)} />
}
}
It can be a good solution: instead of passing reference from button to parent class, remove the button from child class and use TouchableOpacity instead.
import {
TouchableOpacity,
View,
} from 'react-native'
class Parent extends Component {
constructor(props) {
super(props)
}
press(param) {
console.log(param)
}
renderItem = ({item}) => (
<TouchableOpacity onPress={()=>{this.press(item.id)}}>
<Child item={item} />
</TouchableOpacity>
)
render() {
return (
<FlatList renderItem={this.renderItem} />
)
}
}
class Child extends PureComponent {
render() {
// just your view content
const { id } = item
return <View />
}
}
Related
Is it possible to create a method in Parent class in React and then pass it on to the Child and use it there.
So basically I would create a button in my Parent class, pass the function on to the Child and when the Button is clicked, the child will know about it and Parent will not really care for it?
class App extends Component {
clickMade = () => {
//This should be left empty
};
render() {
return (
<div className="App">
<Button onClick={this.clickMade}>Click me </Button>
<Child clickMade={this.clickMade} />
</div>
);
}
}
export default App;
And the Child:
class Child extends Component {
constructor(props) {
super(props);
this.handleClick = this.props.clickMade.bind(this);
}
handleClick = () => {
console.log("Click in child");
}
render() {
return null;
}
}
export default Child;
And a sandbox for this: CodeSandbox
App.js
class App extends Component {
clickMade = () => {
this.childRef.handleClick();
};
render() {
return (
<div className="App">
<Button onClick={this.clickMade}>Click me </Button>
<Child
ref={ref => {
this.childRef = ref;
}}
/>
</div>
);
}
}
To start i am sorry i am a new on native react
I have a project with react navigation who show this component.
import React, { Component } from 'react';
import {FlatList,StyleSheet,View,TouchableHighlight,Text} from 'react-native'
import {
Container,
Button,
ListItem,
Left,
Right,
Icon,
Body
} from 'native-base';
import Customer from '../Customer';
import Search from '../../../components/Search'
export default class SearchCustomer extends Component {
constructor(props) {
super(props);
this.state = {
customerList:[]
}
}
render() {
return (
<Customer>
<Search
setCustomerList = {(customerList) => {this.setState({customerList})}}
/>
<FlatList
data={this.state.customerList}
keyExtractor={item => item.id}
renderItem={({ item, index}) => (
<ListItem onPress={(item) => this.props.callback()}>
<Left style={styles.left}>
<Text>{item.firstname} {item.lastname}</Text>
<Text style={styles.subtitle}>{item.email}</Text>
</Left>
<Right>
<Icon name='arrow-forward' />
</Right>
</ListItem>
)}/>
</Customer>
)
}
}
This component call his parent that here below
import React, { Component } from 'react';
import {
Container,
Button,
Text,
} from 'native-base';
import Order from '../Order';
export default class Customer extends Component {
constructor(props) {
super(props);
this.state = {
}
}
render() {
return (
<Order>
{this.props.children}
</Order>
)
}
}
I want to know how can i send data from the child to his parent with this configuration.
Currently i am trying to catch this.props.callback() in the parent but i can't use this callback={() => {console.log('Ok')}}
I have this error
Someone have a solution ?
Using some of your class you can define a method in your parent class then pass the function as props to child
export default class Customer extends Component {
constructor(props) {
super(props);
this.state = {
}
}
callback = (data) => { console.log(data) }
render() {
return (
<Order callback={this.callback}>
{this.props.children}
</Order>
)
}
}
Then from child you can provide the data in the callback for parent.
export default class Order extends Component {
constructor(props) {
super(props);
this.state = {
}
}
render() {
return (
<TouchableOpacity onPress={() => this.props.callback('hi')}>
<Text>Click Me!</Text>
</TouchableOpacity >
)
}
}
read this for more good understanding : https://reactjs.org/tutorial/tutorial.html#passing-data-through-props
My current structure is like this:
state={
activetab=1,
activetab2=2}
<child1 activetab={activetab}/>
<child2 activetab2={activetab2}/>
And I would like when the user changes the active tab from child 2 to update the state on the parent component, and then also handle the change on the child1 component.
child 1 code :
render() {
const activetab=this.props;
this.showimage1 = () => {
if (activetab === 1) {
return (
<img src={slide1} alt='' />
)
} else null;
}
return (
<div>
{this.showimage1()}
</div>
child 2 code :
constructor (props) {
super(props)
this.changetab= this.changetab.bind(this)
this.state={
activetab:1}
}
render () {
const activetab2=this.props;
changetab(tab) {
if (this.state.activeTab !== tab) {
this.setState({
activeTab: tab
})
}
}
return(
<div>
<button onClick={() => {
this.changetab(1)
}}
>tab1 </button>
</div>
So as you can see I want when the user changes the current tab from child 2 to pass the props in my parent component so that the child1 component knows which image to show depending on the tab. Anyone knows how to do it without rewriting everything in a single component?
Create a main component that renders the two component child 1 and 2 create only 1 source of truth means only 1 state to be pass to the child components as props.
export class MainComponent extends Component {
constructor (props) {
super(props)
this.changetab = this.changetab.bind(this)
this.state={
activetab: 0
}
}
changetab(tab) {
if (this.state.activeTab !== tab) {
this.setState({
activeTab: tab
})
}
render() {
return (
<div>
<ChildOne activetab={this.state.activetab} />
<ChildTwo activetab={this.state.activetab} changetab={this.changetab} />
</div>
)
}
}
// ChildOne Component pass state activetab as props
render() {
const { activetab } = this.props;
this.showimage1 = () => {
if (activetab === 1) {
return (
<img src={slide1} alt='' />
)
} else null;
}
return (
<div>
{this.showimage1()}
</div>
// ChildTwo Component
render () {
const { activetab, changetab } = this.props;
return(
<div>
<button onClick={() => {
this.changetab(1)
}}
>tab1 </button>
</div>
The parent component must have 2 function handlechange that you pass to your childs.
Will look something like that
// Parent
class Parent extends React.Component {
// Constructor
constructor(props) {
this.state = {
child1: 1,
child2: 0
};
}
handleChangeChild1(state) {
this.setState({ child1: state });
}
handleChangeChild2(state) {
this.setState({ child2: state });
}
render() {
return (
<div>
<Child1 onXChange={this.handleChangeChild1} />
<Child2 onYChange={this.handleChangeChild2} />
</div>
);
}
}
And in the children you do
class Child extends React.Component {
constructor(props) {
super(props)
}
handleChange(e) = () => {
this.props.onXChange
}
render() {
return (
<input onChange={this.handleChange} />
)
}
}
I recommend you read the doc
You can wrap the components in a parent component. Then you can pass a function from the parent to child 2 by attaching it to a prop. Child 2 can then call this function on a change.
In the parent:
render() {
const someFunction = (someVariable) => {
// do something
}
return(
<child2 somePropName={ this.someFunction } />
)
}
edit: removed .bind() from this example
I have two components. the App component which is the parent component and the Btn component which is the child component. How can i change the value of property text from the Btn component?
export default class App extends Component<Props> {
constructor() {
super();
this.text = 'testing';
this.onClicked = this.onClicked.bind(this);
}
onClicked() {
this.text = 'changed';
}
render() {
return (
<View style = { styles.container }>
<Text style = { styles.welcome }> { this.text } </Text>
<Btn />
</View>
);
}
}
class Btn extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Button
title = 'Button'
onPress = { ? }
/>
)
}
}
You can pass the parent component's onClicked function as a prop to the child component.
export default class App extends Component<Props> {
...
render() {
return (
<View style = { styles.container }>
<Text style = { styles.welcome }> { this.text } </Text>
<Btn onClicked={this.onClicked}/>
</View>
);
}
}
class Btn extends Component {
...
render() {
return (
<Button
title = 'Button'
onPress = {this.props.onClicked}
/>
)
}
}
You are holding your text value in the wrong place. Hold it in your state. constructor runs once in the initial render and it does not run again like that. But, as a React way, if you hold your data in your state, whenever state changes your component rerenders and you see the updated data.
Then, you can pass your onClick handler to the child component and use it there. Here is the working snippet. I used class-fields so no need to write a constructor and an arrow function (no need to bind it).
class App extends React.Component {
state = {
text: "",
}
onClick = () =>
this.setState({text: "foo bar" });
render() {
return (
<div>
<p>Text is now: { this.state.text } </p>
<Btn onClick={this.onClick} />
</div>
);
}
}
const Btn = ( props ) => (
<button onClick={props.onClick}>Click</button>
)
ReactDOM.render(
<App />,
document.getElementById("root")
);
<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="root"></div>
I have created a component called OrderGuideSelect and I am trying to render it in another area of our app. The problem is the OrderGuideSelect component is not rendering. When I set up breakpoints I am able to hit inside of the renderOrderGuideOptions function but it never makes it into the OrderGuideSelect.js file. I also tried putting 'export default' in front of the class declaration instead of the connection but it didn't make a difference. Does anyone know how to get the OrderGuideSelect component rendering properly?
Here is where I call the function that renders the OrderGuideSelect component:
<TouchableOpacity onPress={() => this.renderOrderGuideOptions()}>
<MBIcon name="ico-24-filter" size={30} style={styles.filterIcon}/>
</TouchableOpacity>
And here is the rendering function:
renderOrderGuideOptions = () => {
return (
<View>
<OrderGuideSelect />
</View>
)
}
Here is the OrderGuideSelect.js file:
import React, {Component} from 'react';
import {View, FlatList, ActivityIndicator, StyleSheet} from 'react-native';
import {connect} from 'react-redux';
import {fetchOrderGuides} from '../../actions/AppActions';
import {orderGuideSelected} from '../../actions/ProductAction';
import Header from '../../components/Header/Header';
import {createIconSetFromIcoMoon} from 'react-native-vector-icons';
import selection from '../../selection';
import OrderGuideOption from './OrderGuideOption';
const MBIcon = createIconSetFromIcoMoon(selection);
class OrderGuideSelect extends Component {
constructor(props) {
super(props);
}
componentWillMount() {
this.props.dispatch(fetchOrderGuides());
}
selectOrderGuide = id => {
this.props.dispatch(orderGuideSelected(id));
}
render() {
const {isLoading, orderGuides} = this.props.orderGuide;
return (
<View style={styles.wrapper}>
<Header />
<View style={styles.iconLine}>
<MBIcon name='ico-24-filter' style={styles.filterIcon} />
</View>
{isLoading &&
<ActivityIndicator
style={{alignSelf: 'center'}}
animating={true}
size='large'
/>
}
{!isLoading &&
<View style={styles.optionList}>
<FlatList
style={styles.optionList}
data={orderGuides}
keyExtractor={(item, index) => item.id.toString()}
renderItem={({item}) => <OrderGuideOption guideData={item} isSelected={item.id == this.props.selectedGuide.id} onSelected={this.selectOrderGuide} />}
/>
</View>
}
</View>
);
}
}
function mapStateToProps(state){
const {products, orderGuide} = state;
return {
selectedGuide: products.selectedOrderGuide,
orderGuide
}
}
export default connect(mapStateToProps)(OrderGuideSelect);
Also, I may be importing of the OrderGuideSelect component should be correct:
In your code calling this.renderOrderGuideOptions function on onPress event doesn't make sense, i.e. this.renderOrderGuideOptions returns the element but where to append it in DOM?
This should be achived using state in React. So you can set the state in onPress handler then use that state in render to show your OrderGuideOptions component.
So on onPress event bind the function handler:
<TouchableOpacity onPress={this.showOrderGuideOptions}>
<MBIcon name="ico-24-filter" size={30} style={styles.filterIcon}/>
</TouchableOpacity>
Now this showOrderGuideOptions will set the state named showOrderGuideFunction to true.
showOrderGuideOptions(){
this.setState({showOrderGuideFunction: true});
}
At last step use this showOrderGuideFunction state to render your component in the render function like this:
render() {
return (
<div>
...
{
this.state.showOrderGuideFunction &&
renderOrderGuideOptions()
}
</div>
)
}
You can do what you want probably holding a state property in your component and show your OrderGuideOptions according to this state property.
state = { showOrderGuideOptions: false };
renderOrderGuideOptions = () =>
this.setState( prevState => ( { showOrderGuideOptions: !prevState.showOrderGuideOptions }) );
render() {
return (
<View>
<TouchableOpacity onPress={this.renderOrderGuideOptions}>
<MBIcon name="ico-24-filter" size={30} style={styles.filterIcon}/>
</TouchableOpacity>
{ this.state.showOrderGuideOptions && <OrderGuideSelect /> }
</View>
)
}
I think you wanted to something similar to this
class RenderOrderGuideSelectComponent extends Component {
constructor(props) {
super(props);
this.state={
showOrderGuideSelect : false
};
}
renderOrderGuideOptions = () => {
this.setState({showOrderGuideSelect: true});
}
render() {
if(this.state.showOrderGuideSelect) {
return (
);
} else {
return (
this.renderOrderGuideOptions()}>
);
}
}
}