Vfrdtyky

I have a library of React components (we'll call it MyLibrary) that is transpiled with babel, exported as an NPM package, and made available to another repo (MyProject). Within MyLibrary, I have a component TextField that makes the following function available:

export default class TextField extends Component {



...



    getValue() {

        return this.state.value;

    }

}

The getValue function is properly bound to this in the defined class, and this function is available when I call it from other components inside of MyLibrary.

However, when I am working in MyProject instead, and I have run npm install MyLibrary and imported TextField like so:

import { TextField } from 'MyLibrary';



...



render() {

    this.field = <TextField id="testField" />;

    return field;

}

Elsewhere in the code, when I attempt to access the exported function like so:

console.log('Retrieving the value of the text field:', this.field.getValue());

I get the following error message:

Uncaught TypeError: field.getValue is not a function

Displaying the properties of the field variable in the console log, I see the following:

$$typeof: Symbol(react.element)

key: null

props: {id: "testField", labelText: "", invalidMessage: "", placeholder: "", spellCheck: false, …}

ref: null

type: ƒ TextField(props)

_owner: FiberNode {tag: 2, key: null, type: ƒ, stateNode: AddEditForm, return: FiberNode, …}

_store: {validated: false}

_self: null

_source: null

__proto__: Object

It seems that getValue is not available as a function at all, even though it is exported as part of the TextField class. It appears that my field variable is recognized in the code as a Symbol type rather than as a TextField type. Is there a way to retrieve the TextField instance directly? Or is there some way I can otherwise avoid this discontinuity?

There is no way that you can access the function defined in a component within React context.

The best solution would be to have a function that sets the value inside MyProject and use it as a prop for your TextField component. Something like this:

// MyLibrary/TextField.js



class TextField extends Component {

    constructor (props) {

        super(props);



        this.state = {

            value: null

        };

        this.setValue = this.setValue.bind(this);

    }



    setValue (value) {

        this.setState({ value }, () => this.props.setValue(value));

    }



    ...

}



// MyProject

...



setValue(value) {

    this.setState({ value })

}



render() {

    return (

        <TextField

            setValue={this.setValue} />

    );

}

You can also remove value from the state of TextField as you have always access to it within the state MyProject, and you can always read the value from the props of TextField after providing TextField with the value prop read from the state of MyProject: <TextField setValue={this.setValue} value={this.state.value} />.