I am trying to create a custom widget for Netlify CMS that connects to the redux store to be updated when a file widget has a new path. My widget will then determine the size of the file to set it's own value.

So far, I have simply cloned the starter widget and changed src/Conrol.js to this:

import React from 'react';
import { connect } from 'react-redux' //Added this line

class Control extends React.Component {
    static propTypes = {
        onChange: PropTypes.func.isRequired,
        forID: PropTypes.string,
        value: PropTypes.node,
        classNameWrapper: PropTypes.string.isRequired,
    }

static defaultProps = {
    value: '',
}

render() {
    const {
        forID,
        value,
        onChange,
        classNameWrapper,
    } = this.props;

    return (
        <input
        type="text"
        id={forID}
        className={classNameWrapper}
        value={value || ''}
        onChange={e => onChange(e.target.value)}
/>
);
}
}

//Added everything below

const mapStateToProps = (state, ownProps) => {
    const fileUrl = "test";
    return { value: fileUrl };
};

export default connect(mapStateToProps, null, null, { withRef: true })(Control);

With these changes I get the following error:

Element ref was specified as a string (wrappedInstance) but no owner was set. This could happen for one of the following reasons: 1. You may be adding a ref to a functional component 2. You may be adding a ref to a component that was not created inside a component's render method 3. You have multiple copies of React loaded See https://reactjs.org/link/refs-must-have-owner for more information.

I can't figure out what I'm doing wrong. As for the reasons given in the error:

  1. I'm working with a class component.
  2. I didn't even touch the component rendering. I only added the connect().
  3. I ran npm ls react as suggested at the link provided in the error. I got two copies of react, but one was "deduped".

I have searched far and wide for an answer, but have not found one. I am new to react/redux, so I'm hoping someone can point me in the right direction.

0

There are 0 best solutions below