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:
- I'm working with a class component.
- I didn't even touch the component rendering. I only added the connect().
- 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.