How can I change the CSS properties of an imported component in React

Question

How can I change the CSS properties of an imported component in React? I am trying to make a function that works like: onclick = increases the size of the component clicked, and when clicked away it goes back to normal.

I have implemented this before directly accessing the DOM in vanilla javascript, but I do not know how to do this in react.

Currently, I have an empty function

function appcardWasClicked() {

}

and the components in a div set to onClick={appcardWasClicked()}:

<div className="Appreviewcard-index">
        <Appreviewcard onClick={appcardWasClicked()}/>
        <Appreviewcard onClick={appcardWasClicked()}/>
        <Appreviewcard onClick={appcardWasClicked()}/>
  </div>

index.js

import React from "react"
import { Link, graphql } from "gatsby"

import Layout from "../components/layout"
import SEO from "../components/seo"

import Bottom from '../components/Home/bottom-nav'
import Firstparagraph from '../components/Home/first-paragraph'
import Appfeatures from '../components/Home/app-features'
import Appworks from '../components/Home/app-works'
import Extrafeatures from '../components/Home/extra-features'
import Appreview from '../components/Home/app-review'
import Appreviewcard from '../components/Home/app-review-card'
import Header from '../components/Home/header'





const PageIndex = ({ data, location }) => {
  const siteTitle = data.site.siteMetadata.title
  
  function appcardWasClicked() {
    
  }

  return (
    <Layout location={location} title={siteTitle}>
      <SEO title="All posts" />
      <Header />
      <Firstparagraph />
      <Appfeatures />
      <Appworks />
      <Extrafeatures />
      <Appreview />
      <div className="Appreviewcard-index">
        <Appreviewcard onClick={appcardWasClicked()}/>
        <Appreviewcard onClick={appcardWasClicked()}/>
        <Appreviewcard onClick={appcardWasClicked()}/>
      </div>
      <Bottom />
    </Layout>
  )
}

export default PageIndex


export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
  }
`

app-review-card.js

import React, { Component } from 'react'
import person1 from "../../images/myself.jpg"



export class Appreviewcard extends Component {
    render() {
        return (
            <div className="Appreviewcard">
                <div className="Appreviewcard-main">
                    <div className="Appreviewcard-main-picture">
                        <img src={person1} alt="person" className="Appreviewcard-main-picture-img"/>
                    </div>
                    <div className="Appreviewcard-main-text"> 
                        <h1 className="Appreviewcard-main-text-h1">John Deo</h1>
                        <p className="Appreviewcard-main-text-h3">CEO, ABC Company</p>
                    </div>
                </div>
                <div className="Appreviewcard-secondary">
                    <p className="Appreviewcard-secondary-h2">Lorem Ispum dollar ispestum sosad Lorem Ispum dollar ispestum sosad Lorem Ispum dollar ispestum sosad Lorem Ispum dollar ispestum sosad</p>
                </div>
            </div>
        )
    }
}

export default Appreviewcard

Answer 1

You need to access the Clicked div through the function. For that, You event to pass an event like bellow:

<Appreviewcard onClick={(e) =>appcardWasClicked(e)}/>

Also receive that event and get the element from it, and than apply css with vanila js as you have done it before.

function appcardWasClicked(e) {
    const element = e.target;
    //here write your desired css with vanillaJs

  }