Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Rendered cell should include style property for positioning

I am doing some work for my web app with react and i got this console warning：

react_devtools_backend.js:4012 Rendered cell should include style property for positioning. 
    at Grid2 (http://localhost:5173/node_modules/.vite/deps/react-virtualized.js?v=b41cc5be:1029:5)
    at List2 (http://localhost:5173/node_modules/.vite/deps/react-virtualized.js?v=b41cc5be:4123:5)

It seems that a warning is generated when using the two libraries react-virtualized and react-rnd. The warning message states that the rendered cell should contain a style attribute for positioning, but it seems that this attribute is missing from the rendering.I was wondering if anyone could give me some advice.
Here is my code:

              rowRenderer={({index, key, style}) => {
                const line = store.rightMessages[index];
                const l = line.message.toLowerCase();
                return (
                  <React.Fragment key={key}>
                    <CopyToClipboard key={line.id} text={line.message} onCopy={handleCopy}>
                      <p
                        key={key}
                        style={style}
                        // eslint-disable-next-line @compass/react/no-inline-styles
                        className={cx({
                          [classes.line]: true,
                        })}>
                        {line.message}
                      </p>
                    </CopyToClipboard>
                  </React.Fragment>
                );
              }}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have solved the problem by replace React.Fragment with div.


  2. 0

    You have to move the style props to the outest element. And it can not be a <Fragment />

    You may should remove redundant key and style props in CopyToClipboard and p

    rowRenderer={({index, key, style}) => {
                const line = store.rightMessages[index];
                const l = line.message.toLowerCase();
                return (
                  <div key={key} style={style}>
                    <CopyToClipboard text={line.message} onCopy={handleCopy}>
                      <p
                        // eslint-disable-next-line @compass/react/no-inline-styles
                        className={cx({
                          [classes.line]: true,
                        })}>
                        {line.message}
                      </p>
                    </CopyToClipboard>
                  </div>
                );
              }}

    I don’t have your full code so I make my own code

    • This code cause the warning
      enter image description here

    • In this code the warning will disappear when I moved style to outest element with this code

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search