0

I have a functionnal component that receive props from Class Component. The jQuery script does'nt work in this component.

Cards.js :

import $ from 'jquery';

const Cards = (props) => {
  
  $(document).ready(function() {
    $('.w-card').click(function() {
      $(this).toggleClass('w-card-active').siblings().removeClass('w-card-active');
    });
  });

  const data = props.data ? props.data.map((donne) => {
  return (
    <div className="w-card" key={donne.date_epoch} id={donne.date_epoch}>
      <span className="w-card-title">
        { donne.date }
      </span>........);

  return (
    <div className="w-cards pb-2 center-lg center-md center-sm">
      {data}
    </div>
  );

}
 
export default Cards;

Even thought in the Class component it does'nt work on componentDidMount for My Cards.js component

Aymane Lassfar
  • 133
  • 2
  • 11
  • This is extremely strange. Don't mix jQuery and React. If you're going to use React, use React everywhere, IMO – CertainPerformance Aug 30 '20 at 16:45
  • I give u that situation to give me an answer – Aymane Lassfar Aug 30 '20 at 16:49
  • Does this answer your question? [How to use JQuery with ReactJS](https://stackoverflow.com/questions/38518278/how-to-use-jquery-with-reactjs) – hgb123 Aug 30 '20 at 16:52
  • No I already visited this question – Aymane Lassfar Aug 30 '20 at 16:56
  • I have to agree with @CertainPerformance here, while you _can_ mix React and JQuery, it is extremely inadvisable to do so. React is meant to build declarative UIs, while JQuery is for DOM manipulation. So React might overwrite your JQuery stuff any time it re-renders – CerebralFart Aug 30 '20 at 17:19

0 Answers0