-2

I want to more than one cards in different background color what i do ? eg:

import React from "react";
import reactDom from "react-dom";

const BgColor=(props)=>{
    
    return(
       <>
        <div className="main_div">
            <div className="cards" >
                <div className="card-side front" >
                    <div><span>C</span>opy<span>C</span>ode</div>
                </div>
                <div className="card-side back">
                    <div><i className="fas fa-copy fs-3" /><br />{props.code}</div>
                </div>
            </div>
        </div>
       </>
    )
}
export default BgColor;

by pass value in app.js

and so on.....

please help me how to pass value inside the app.js

Apostolos
  • 10,033
  • 5
  • 24
  • 39

1 Answers1

0

with this example is hard to to help you. Indeed, we don't know what your props object contains.

Let's assume your props contains

{
   name: "toto",
   code: "myCode"
}

In order to change background color based on props, you have multiples choices.

You can use dynamics classNames based on your props:

const BgColor=(props)=>{
    
    return(
       <>
        <div className="main_div">
            <div className="cards" >
                <div className={`${props.name} card-side front`} >
                    <div><span>C</span>opy<span>C</span>ode</div>
                </div>
                <div className="card-side back">
                    <div><i className="fas fa-copy fs-3" /><br />{props.code}</div>
                </div>
            </div>
        </div>
       </>
    )
}

See the <div className={${props.name} card-side front} > line. Go to css or scss file for this component and add a class selector inside of it. In our example, it will be

.toto {
   background: red
}

The second option is to inject directly the css inside your div.

Let's assume you send the desired background color inside your propos:

{
   backgroundColor: "red",
   code: "myCode"
}

In order to that, you have to do this

const BgColor=(props)=>{
        
        return(
           <>
            <div className="main_div">
                <div className="cards" >
                    <div className="card-side front" style={{backgroundColor: props.backgroundColor}}>
                        <div><span>C</span>opy<span>C</span>ode</div>
                    </div>
                    <div className="card-side back">
                        <div><i className="fas fa-copy fs-3" /><br />{props.code}</div>
                    </div>
                </div>
            </div>
           </>
        )
    }

If you want to know more about css in React, you can check: https://reactjs.org/docs/faq-styling.html, React.js inline style best practices, https://create-react-app.dev/docs/adding-a-stylesheet/

UPDATE

You can send an array of colors like <BgColor colors={["red", "blue"]} /> then in your BgColor component, you can map on your props like:

    const BgColor=({colors})=>{

     return (
      <div className="main_div">
        <div className="cards">
            {colors.map((color, index) => {
                return (
                    <div
                        className="card-side front"
                        style={{ backgroundColor: color }}
                        key={index}
                    >
                        <div>
                            <span>C</span>opy<span>C</span>ode
                        </div>
                    </div>
                );
            })}
         </div>
       </div>
     );    
    }
Raphael Escrig
  • 146
  • 2
  • 6
  • how to pass value for more cards in App.js – ZAHID KHAN Jun 16 '21 at 09:46
  • import React from "react"; import ReactDom from "react-dom"; import Home from "./components/Home"; import Header from "./components/Header"; import Navbar from "./components/Navbar"; import BgColor from "./components/BgColor"; function App() { return (
    ); } export default App;
    – ZAHID KHAN Jun 16 '21 at 09:51