I have a parent component like this:
class Parent extends Component {
onChangeState=()=>{
//I want to change it here
}
render(){
return(
<child />)
})
}
I want to change child component's state in parent. How can I do that ?
class Child extends Component {
constructor(props) {
super(props);
this.state = {
item: ''
};
}
}
In this case, you need to define the state in the parent and pass it as a prop to the child. Then, your parent has full control over the state and a state change will cause a rerender of the child and its prop will be updated. This yields in the same effect.
class Parent extends Component {
constructor(props) {
super(props);
this.state = { item: '' };
}
onChangeState = (newItem) => {
this.setState({ item: newItem })
}
return (
<Child state={this.state} />
)
}
class Child extends Component {
constructor(props) {
super(props)
}
render() {
return (
<Text>{this.props.state.item}</Text>
)
}
}
Related
I'm trying to pass a boolean value from Parent to Child through a props.
in the Parent component:
class Parent extends Component {
constructor(props) {
super(props);
}
...
render() {
...
retrun (
<Child
addSearchBar
value="child 1"
/>
<Child
value="child 2"
/>
);
}
}
I tried to do this addSearchbar={true} but i got an ESLint error ESLint: Value must be omitted for boolean attributes.
And in the Child component when i'm trying console.log the props addSearchbar isn't within the props it has a value of undefined. How can i pass the boolean value?
class Child extends Component {
constructor(props) {
super(props);
console.log(this.props) <-- addSearchbar isn't within the props
this.state = {
searchText: '',
};
}
...
render() {
const {
addSearchbar
} = this.props;
console.log(addSearchbar) <--undefined
...
}
}
For boolean props, you don't have to provide a value.
If you don't pass the prop, the value will be false
<Child/>
If you pass the prop, the value will be true
<Child addSearchbar/>
I created a basic working example on codepen
Using react-native I don't understand, how I have to populate changes to nested structures.
I created a simple sample.
Parent owns a Button. When pressed, the clickcount within the parent will be increased.
How do I achieve that Child' clickcount will also be increased? (in my real world scenario I want specific childs to be re-rendered. I understand that I have to change some state therefore)
Parent
var React = require('react');
import { StyleSheet, Text, View, Button } from 'react-native';
import Child from './Child';
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
clickcount: this.props.clickcount,
}
child = (<Child clickcount={this.state.clickcount}/>);
}
handlePress() {
console.log('Parent handlePress');
this.increment();
}
increment() {
this.setState({clickcount: this.state.clickcount+1});
}
render() {
return (
<View>
<Text>Parent {this.state.clickcount}</Text>
<Button
title="OK"
onPress={() => this.handlePress()}
/>
</View>
);
}
}
export default Parent;
Child
var React = require('react');
import { StyleSheet, Text, View, Button } from 'react-native';
class Child extends React.Component {
constructor(props) {
super(props);
this.state = {
clickcount: this.props.clickcount,
}
}
handlePress() {
console.log('Child handlePress');
this.increment();
}
increment() {
this.setState({clickcount: this.state.clickcount+1});
}
render() {
return (
<View>
<Text>Child {this.state.clickcount}</Text>
</View>
);
}
}
export default Child;
Currently, after 3x click the output looks like:
Parent 3
Child 0
You can pass the increment function to the child so the parent owns the click count
class Child extends React.Component {
render() {
return (
<div>
<button onClick={this.props.increment}/>
{this.props.clickCount}
</div>
)
}
}
class Parent extends React.Component {
state = {
clickCount: 0
}
increment = () => {
this.setState({ clickCount: this.state.clickCount + 1 })
}
render () {
return (
<Child increment={() => this.increment()} clickCount={this.state.clickCount}/>
)
}
}
I'm passing a string value from one component class to another and try to update the state in another class
class Dashboard extends Component {
constructor(props) {
super(props);
this.state = {
systemDetailsData: null,
}
}
CalledFromHeader = (systemDetailsData11) => {
this.setState({ systemDetailsData:systemDetailsData11 })
}
}
class Header extends Component {
constructor(props) {
super(props);
Dashboard_Obj = new Dashboard();
}
OnPress = () => {
Dashboard_Obj.CalledFromHeader("system data");
}
}
I'm getting this error ---> Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the Dashboard component.
I want to update the state in Dashboard class using above code, Can anyone help me how to achieve this?
Call the Header component in Dashboard render method and pass a function as a prop to Header component.
class Dashboard extends Component {
constructor(props) {
super(props);
this.state = {
systemDetailsData: null,
}
}
CalledFromHeader = (systemDetailsData11) => {
this.setState({ systemDetailsData:systemDetailsData11 })
}
redner(){
return <Header changeState={this.CalledFromheader} />
}
}
class Header extends Component {
constructor(props) {
super(props);
}
render(){
return(
// something view onPress handler
<Button onPress={()=>{
this.props.CalledFromHeader('Some parameters')
}} />
)
}
}
How can a component be moved from one part of the render hierarchy to another while maintaining component state? In the example below, the result of the call to setView creates a new view (as seen by a new instanceValue number), even though I pass what looks like the existing view.
class TestTo extends React.Component {
constructor(props) {
super(props);
this.state = {
instanceValue: parseInt(Math.random() * 100)
}
}
render() {
return <Text>{this.state.instanceValue}</Text>
}
}
class TestFrom extends React.Component {
constructor(props) {
super(props);
this.state = {
view: <TestTo />
}
}
doSet = () => {
this.props.nav.setView(this.state.view);
}
render() {
return <View>
<Button title="doaction" onPress={this.doSet} />
{this.state.view}
</View>
}
}
class Holder extends React.Component {
constructor(props) {
super(props);
this.state = {
view: <TestFrom nav={this} />
}
}
setView = (view) => {
this.setState({view: view});
}
render() {
return this.state.view
}
}
<Holder />
Say i have a Parent component and a Child component which both have states with a value in common 'item'.How do i synchronise the 'item' value in the Parent and Child states ?To be more concrete, the parent could be a page of the app and the child could be a personnalized input. When i write in the input i want the page state to be updated and when the page state is updated by an external factor (say by a notification) i want the input to be updated.
export default class Parent extends Component {
constructor(props) {
super(props);
this.state={
item: 1,
}
}
render() {
return (
<Child
item = this.state.item
/>
)
}
// I want any function of this type to automatically update
// child state (and redraw child) without having to manually resynchronise
modifyItem() {
this.setState({ item: neValue })
}
}
export default class Child extends Component {
constructor(props) {
super(props);
this.state={
item: this.props.item,
}
}
// I want any function of this type to automatically update
// parent state without having to manually resynchronise
modifyItem() {
this.setState({ item: neValue })
}
}
export default class Parent extends Component {
constructor(props) {
super(props);
this.state={
item: 1,
}
}
onItemChange(item) {
this.setState({ item });
}
render() {
return (
<Child
item = this.state.item
onItemChange={this.onItemChange.bind(this)}
/>
)
}
// I want any function of this type to automatically update
// child state (and redraw child) without having to manually resynchronise
modifyItem() {
this.setState({ item: neValue })
}
}
export default class Child extends Component {
constructor(props) {
super(props);
this.state={
item: this.props.item,
}
}
// I want any function of this type to automatically update
// parent state without having to manually resynchronise
modifyItem() {
this.setState({ item: newValue })
if (this.props.onItemChange) {
this.props.onItemChange(newValue);
}
}
}