Access state outside the class

react access props outside class
access state outside class react native
react access state of another component
redux dispatch outside component
access redux store outside component
how can you access the state of a component from inside of a member function
access state in render
react set state outside

I am updating the width and height values each time the device rotates. I need this values to make some calculations. This is my code

function wp (percentage) {
    const value = (percentage * this.state.viewportWidth) / 100;
    return Math.round(value);
}
const height = this.state.viewportHeight * 0.45; // I am getting the error here

export default class MyClass extends Component {

      onLayout(e) {
        this.updateLayout()
      }

      componentDidMount() {
        this.updateLayout()
      }

      updateLayout = () => {
        const {width, height} = Dimensions.get('window')
        this.setState({viewportWidth: width });
        this.setState({viewportHeight: height });
      }
}

I am getting an error telling me the this.state.viewportHeight is undefined. Do you have any idea on how to solve that?

if you want to use the viewportWidth outside of the component then pass it into your function as a parameter.

function wp (percentage, width) {
    const value = (percentage * width) / 100;
    return Math.round(value);
}

It is unclear where you are calling the wp function from your code, but if you are calling it from inside the component then you need to replace it with wp(yourPercentageValue, this.state.viewportWidth)

You height calculation is just floating there so you can do the same and replace it with a function that takes the viewport

function hp (height) { return height * 0.45 }

Then you can call hp(this.state.viewportHeight) in your component.

State, in react, is the state of a component so you can never use it outside of a component. You can pass it into things though, either as a prop or parameter, which is what I did above.

Accessing Component Methods and State from Outside React, How To Access Component State/Methods From Outside React. Consider this simple class ChildComponent extends React.Component { The problem is: I can access the url only inside the Audio class, if I try to use outside it, I got the following error: undefined is not an object (evaluating 'this.props.sUrl'). I'll post the Adio's code so you can see where I use the props and maybe give me an idea on how I achieve what I need in a different way.

If your component stays in sync with the dimensions, then outside of your component you could just reference these dimensions directly through:

Dimensions.get('window').width and Dimensions.get('window').height

Access the Redux Store Outside a React Component, Need to access your Redux store outside a React component? store'; export function getProtectedThing() { // grab current state const state  Accessing Component Methods and State from Outside React 14 February 2018. On: code. Most React apps I build are self-contained - the entirety of the app lives within a root component, and is responsible for rendering the full web page/app. And the app doesn't need to communicate with other JavaScript or elements on the page.

Yes, you can access the state outside. You need to make an instance of the class using the new keyword

    new MyClass().state.viewportWidth

How to Work with and Manipulate State in React, Let's get started with accessing state in React components. render this.state (as any other variable or a custom component class attributes)  The member function is declared inside the class like a normal function. This declaration informs the compiler that the function is a member of the class and that it has been defined outside the class. After a member function is declared inside the class, it must be defined (outside the class) in the program.

React State without Constructor, In React, state is used in a React class component. setState , because you have access to the class instance by using the this object. Everything that's needed outside of the render prop component, in this case the state  A private member variable or function cannot be accessed, or even viewed from outside the class. Only the class and friend functions can access private members.

Can a component access the state of another component?, How do I access Redux store outside a react component? no direct access from outside the class Every instance of a class has it own separate state If you have 5,234 BankAccount objects, you'll have

Update react component without parent outside of it, Can you trigger a component state change outside a component? Class and struct members, including nested classes and structs, have private access by default. Private nested types aren't accessible from outside the containing type. Derived classes can't have greater accessibility than their base types. You can't declare a public class B that derives from an internal class A.

Comments
  • If that didn't work for you, you need to show us more code to be able to help you. At the moment it is unclear where you are calling the wp function