MaterialUI Redux connect() using TextArea and submitting form. Warning about refs in func components

Question

What's the problem?

I've been trying to use Material UI in my journaling app (was just vanilla css before). I'm getting this warning.

index.js:1 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of Unstable_TrapFocus.

What did I expect to happen? When I wasn't using material UI, the connect function worked just fine with a regular react form. I was expecting the same.

What I've tried

I'm wrapping the functional component in React.forwardRef, but I'm still getting the warning.

import React, { useState } from 'react';
import { connect } from 'react-redux';
import { createJournal } from '../actions/journal';
import { makeStyles } from '@material-ui/core/styles';
import { Paper, Button, TextField } from '@material-ui/core';

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: '80vw',
    minHeight: '50vh',
    maxHeight: '100vh',
  },
}));

const JournalCreator = React.forwardRef(({ createJournal, ref }) => {
  const classes = useStyles();
  const [journalText, editJournalText] = useState({
    text: '',
  });

  const { text } = journalText;

  return (
    <div className={classes.root} ref={ref}>
      <Paper className={classes.root}>
        <TextField
          style={{ width: '70vw' }}
          placeholder='Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis maiores quo ipsam dicta ex quae expedita ducimus tempore, consequuntur facere? Fugit facilis blanditiis, aliquam adipisci repudiandae cupiditate suscipit corporis saepe'
          label='Journal Text'
          name='journalText'
          value={text}
          fullWidth
          multiline
          margin='normal'
          onChange={(e) => editJournalText({ text: e.target.value })}
        />

        <Button
          type='submit'
          onClick={async (e) => {
            e.preventDefault();
            await createJournal(text);
            editJournalText({ text: '' });
          }}
        >
          Create Journal
        </Button>
      </Paper>
    </div>
  );
});

const mapStateToProps = null;

const mapDispatchToProps = { createJournal };

export default connect(mapStateToProps, mapDispatchToProps)(JournalCreator);

For reference, here is the component that is rendering the JournalCreator component.

import React, { useEffect, useState } from 'react';
import JournalCreator from './JournalCreator';
import escKeyHandle from '../utils/escKeyHandle';
import { Modal } from '@material-ui/core/';

const JournalModal = ({ toggleModalOpen }) => {
  useEffect(escKeyHandle(toggleModalOpen), []);

  return (
    <Modal
      open={true}
      onClose={() => {
        toggleModalOpen(false);
      }}
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <JournalCreator />
    </Modal>
  );
};

export default JournalModal;

What I think is the issue

There is most likely something going on with references in MaterialUI that doesn't occur with regular react forms / functional components, but I'm afraid I'm too new to MaterialUI to be able to say.

There is a reference to the connect function in the warning, so I think it has to do with react-redux connect()

Thanks in advance for your help!

MaterialUI Redux connect() using TextArea and submitting form. Warning about refs in func components

0 Answers0