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
Related
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>
)
}
}
I have two components Main and Child
export default class Main extends Component {
render() {
return (
<View>
<Child item={this.state.selectedItem} />
</View>
)
}
}
export default class Child extends Component {
state = {
newItem: null
};
organiseProductOptions() {
const { item } = this.props;
Async Request with item.ID... {
setState({ newItem: response })
}
}
componentDidMount() {
this.organiseProductOptions();
}
render() {
return (
<View>
<Text>{this.state.newItem.name}</Text>
</View>
)
}
}
Normally, this.organiseProductOptions() function is working in componentDidMount() initial state. However, When I try to rerender Child, render() method is working but componentDidMount() is not working.
How can I fire, this.organiseProductOptions() function in Child Component, when I setState selectedItem property at another time in Main Component?
Please note that, Child Component has own states.
Since Child mounts only once you can check when Child's props are changed and do your requests. Add
componentDidUpdate(prevProps) {
if (prevProps.item !== this.props.item) { // 'item' is changed
this.organiseProductOptions();
}
}
The child component re-renders when the props change but it doesn't remount. So when the child mounts it will set newItem as this.props.item, but after that newItem will never change.
The standard practice would be to just use this.props.item everywhere in your child component.
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')
}} />
)
}
}
i want to pass my params value in my custom component so below is my code
Header.js
class Header extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View >
<Text >Title</Text>
<Text>subtitle</Text>
</View>
);
}
}
I call my Header.js from my main.js
class Main extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Header title = {this.props.navigation.state.params.screen_title} subtitle= {this.props.navigation.state.params.subtitle} />
);
}
}
I pass my title and subtitle in my header component , i just wanted to know how can i access my passing variable value in my header component ? your all suggestions are appreciable
Its very simple You can access it by
this.props.title
this.props.subTitle
this.props.nameOfTheProps
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);
}
}
}