react-only-html-props

react-only-html-props

ohp allows to filter props to get only the react html props.

Problem :

import React, { useState } from "react";
 
const ArticlesList = props => {
  return (
    // source of the problem ({...props})
    <div {...props}>
      <ul>
        {props.articles.map((article, i) => (
          <li key={i}>{article.title}</li>
        ))}
      </ul>
    </div>
  );
};
 
const App = () => {
  const articles = [{ title: "My super article" }, { title: "Lorem ipsum" }];
  const [, setEditingArticle] = useState();
  return (
    <div className="App">
      <ArticlesList
        articles={articles}
        style={{ background: "#fff" }}
        setEditingArticle={setEditingArticle}
      />
    </div>
  );
};
 
export default App;

The code below will trigger this warning :

Warning: React does not recognize the `setEditingArticle` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `seteditingarticle` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Fix :

import React, { useState } from "react";
import { ohp } from "react-only-html-props";
 
const ArticlesList = props => {
  return (
    // solution of the problem ({...ohp(props)})
    <div {...ohp(props)}>
      <ul>
        {props.articles.map((article, i) => (
          <li key={i}>{article.title}</li>
        ))}
      </ul>
    </div>
  );
};
 
const App = () => {
  const articles = [{ title: "My super article" }, { title: "Lorem ipsum" }];
  const [, setEditingArticle] = useState();
  return (
    <div className="App">
      <ArticlesList
        articles={articles}
        style={{ background: "#fff" }}
        setEditingArticle={setEditingArticle}
      />
    </div>
  );
};
 
export default App;