Thinking that I have a ponent:

    <Component1>
        <Component2 value={0}/>
        {window.console.log(Component2.value)}
    </Component1>

How may I do this window.console.log works, because I have a problem trying to reach that prop.

Thinking that I have a ponent:

    <Component1>
        <Component2 value={0}/>
        {window.console.log(Component2.value)}
    </Component1>

How may I do this window.console.log works, because I have a problem trying to reach that prop.

• javascript
• html
• reactjs
• jsx

Share Improve this question Follow asked Mar 13, 2019 at 16:49 André GonçalvesAndré Gonçalves 5111 gold badge22 silver badges55 bronze badges 3

• 4 I think you should read more the react doc. It's not how you should access values from Components. If you want to log the value, you should put your console.log into your Component2. – soywod Commented Mar 13, 2019 at 16:51
• 1 You will be passing the prop i.e '0' from Component1 to Component2. You already have access to it. – Utsav Patel Commented Mar 13, 2019 at 16:52
• The value of ponent2 changes inside it and it is just an figured example. Thanks for helping. – André Gonçalves Commented Mar 13, 2019 at 17:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 0

Why don't you access that value from the state of the ponent1?

class Component1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0
    };
    this.incrementCounter = this.incrementCounter.bind(this);

  }


  incrementCounter() {
    this.setState(prevState => ({ counter: prevState.counter + 1 }));
  }



  render() {
    return (
      <View>
        <Component2
          incrementCounter={this.incrementCounter}
          counter={this.state.counter} />
        <Component3 counter={this.state.counter} />
      </View>
    )

  }
}

Lastly inside the Component2

<button onClick={this.props.incrementCounter}>
  click to increment counter
</button>

This is number one rule of the React, child ponents doesn't mutate data they speak to parent ponent through methods passed to them. This also makes data flow better, actually this is how you should be using React.

Basically what you need to do is pass to your <Component2> a callback function as a prop that returns the value updated to your <Component1> (I've made a little StackBlitz => https://stackblitz./edit/react-rym9h9?file=Component2.js), here you have the sample:

<Component1>:

import React, { Component } from 'react';
import { render } from 'react-dom';
import Component2 from './Component2';
import './style.css';

class Component1 extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  getUpdatedValue = (updatedValue) => {
    console.log('Here is your updated value: ', updatedValue);
  };

  render() {
    return (
      <div>
        <Component2 value={0} returnUpdatedValue={this.getUpdatedValue} />
        <p>
          Start editing to see some magic happen :)
        </p>
      </div>
    );
  }
}

render(<Component1 />, document.getElementById('root'));

<Component2>:

import React, { Component } from 'react';

class Component2 extends Component {
  ponentDidMount() {
    const { value, returnUpdatedValue } = this.props;
    let updateValue = value + 100;


    returnUpdatedValue(updateValue)
  };

  render() {
    const { value } = this.props;

    return (
      <div>
      <h1>{value}</h1>
      </div>
    );
  }
}

export default Component2;