access to the fields of a class TypeScript with React

typescript react component type
typescript class
react + typescript setstate
react.function component typescript
react typescript pass function as prop
react.fc typescript
use props in class react typescript
typescript interface

I'm working with React, TypeScript and axios for HTTP requests. When I do axios.get (myURL) I get my data in this format:

[["value1","value2"],["value3","value4"],["value5","value6"]]

I created a class that represents a string array. Here is the code:

import  Serializable  from '../interface/serializable';

export default class Row {
    public row:string[];
}

And here is the code of the component in which I would like to use this class :

import Row from '../class/row';

interface IColumnSelectionState {
    readonly data: Row[],
}
    class MyDataextends React.Component<any,IColumnSelectionState>{

            constructor(props: any) {
                super(props);
                this.state = {
                    data: [],
                }
                this.submit = this.submit.bind(this);
            }

   private submit():void{
                axios.get("myURL").then(res => {
                    const response = res.data;
                    this.setState({ data: response });
                }).catch(error => {
                    console.log(error);
                })
            }
        }

The problem when I execute the "submit()" method and I'm doing :

 console.log (this.state.data) // I see my data in the format described    above

but when I do :

console.log (this.state.data [0].row) // this shows me undefined while I declared my array in the Row class

I really need to get the first array to loop it and do the treatments.

If anyone has an idea of how to do this thank you for helping me !

thank you in advance !!!

There's no row in the format presented. There's also an unnecessary space in the log. Try console.log(this.state.data[0];

reactjs - access to the fields of a class TypeScript with React, I'm working with React, TypeScript and axios for HTTP requests. When I do axios.​get (myURL) I get my data in this format: [["value1","value2"]  The createRef function was introduced in React version 16.3. So, when using a previous version, a different technique needs to be used to access a ref. In the previous examples, the ref prop has been set to an instance of RefObject but it can also be set to a callback method that accepts a parameter of the DOM element. This callback can then be used to set a class field to the element:

it returns me an instance of Row. So normally if I do "this.state.data [0] .row" it should send me a string array because Row has a property "row: string []"

Classes · TypeScript, What's more, before we ever access a property on this in a constructor body, we have to call TypeScript supports the new JavaScript syntax for private fields: TypeScript supports getters/setters as a way of intercepting accesses to a member of an object. This gives you a way of having finer-grained control over how a member is accessed on each object. Let’s convert a simple class to use get and set. First, let’s start with an example without getters and setters.

I agree with Barazu. Let me take a different approach to the problem. The data field you’re getting back is itself of type ‘Row’. I’ve tweaked the Axios request ever so slightly to demonstrate. (Apologies for the formatting in advance)

           axios.get("myURL").then(res: AxiosResponse<Row> => { // added a type here to res
                const response = res.data; // response is a Row[]
                this.setState({ data: response });
            }).catch(error => {
                console.log(error);
            })

Here, Axios uses generics to state the payload (the data field)is of type Row is not a field or property on ‘data’ but ‘data’ is of type ‘Row[]’.

I’m not sure where you need to iterate on this data, but I’m gonna take a guess it’s once it’s on the state of the component. Then you should be able to do something like this once the data is retrieved

const myRows: Row[] = this.state.data;
for (const row of myRows) { console.log(myRow[0]); }

How to Statically Type React Components with TypeScript, To access React TypeScript typings, ensure your TypeScript-based To implement a React class component, the classes to extend are React. Static fields. There are three common cases where static fields shine when it comes to React components. It is setting propsTypes, defaultProps and childContextTypes. We are used to setting them outside of the class. It often makes you scroll to the very bottom of the file to learn about props which component expects.

TypeScript and React: Components, The “olde way” of doing components is with class components. the clock's state has one field: The current time, based upon the When we access state in our render function, we have access to all  One of the things that convinced me to use React were functional components. The “olde way” of doing components is with class components. And they can keep state per class. State is like props, but private and only controlled by the component. @types/react typings of course have full support for those, and are also equally easy to use.

Class fields are coming. Here's what that means for React, If you've ever written a class component in React, you probably have a get the ubiquitous this is undefined; can't access its "setState" property error. TypeScript users are probably looking at this and wondering why this song  A class in terms of OOP is a blueprint for creating objects. A class encapsulates data for the object. Typescript gives built in support for this concept called class. JavaScript ES5 or earlier didn’t support classes. Typescript gets this feature from ES6. Creating classes. Use the class keyword to declare a class in TypeScript.

10++ TypeScript Pro tips/patterns with (or without) React, Your ultimate missing TypeScript style guide not only for React developers. directly with React Component instance nor accessing its class properties. Class fields are in Stage 3, which means they are gonna be implemented in JS soon  This is the fourth post in a series of blog posts where we are building our own super simple form component in React and TypeScript. In the last post we leveraged the context api to encapsulate the managing of form values.

Comments
  • Do you need to initialize 'this.state.data' in the constructor? If so, you should assign it a new Row[], not [].
  • Look at your format. Do you see row anywhere? Either reformat the data you are fetching or access it as I instructed in my answer. And again, mind your spaces!