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.
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?