Warning: A string ref, ".$.$.$1", has been found within a strict mode tree

208 Views Asked by At

I have a simple react app created using create-react-app and I am using react-stonecutter for my Grid. Getting this error in console when I try to pass data into a list item. Also if I don't use a button I can't see anything on the screen (the list is blank). I would like to use my own react component instead of button in the list.

error text:

Warning: A string ref, ".$.$.$1", has been found within a strict mode tree. String refs are a source of potential bugs and should be avoided. We recommend using useRef() or createRef() instead.

console error

Code Setup:

index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

QuoteGrid.js:

import React from "react";
import { CSSGrid, measureItems, makeResponsive } from 'react-stonecutter';
import data from '../assets/DummyList.json';

const Grid = makeResponsive(measureItems(CSSGrid), {
    maxWidth: 1920,
    minPadding: 100
});

const QuoteGrid = () => {

    return (
        <div className="nav-bar-area">
            <Grid
                className="quote-grid"
                component="ul"
                gutterWidth={5}
                gutterHeight={5}
                columnWidth={150}
                duration={800}
            >
                {data.map((datum) => (
                    <li className="grid-item" key={datum.id}>
                        <button className="item-btn" key={datum.id}>
                            {datum.text}
                        </button>
                    </li>

                ))}
            </Grid>
        </div>
    );
}

export default QuoteGrid;

DummyList.json:

[{
    "id": 1,
    "text": "Who controls the British crown?"
}, {
    "id": 2,
    "text": "Who keeps the metric system down?"
}]

please help! what am I doing wrong?

0

There are 0 best solutions below