I'm new here, So if my question is not good, Please let me know so that I can edit.
I'm using ReactJS + Material UI. I have a component, but I want this component to be rendered with different properties depending on the props, like this:
In the page where I want render the component:
<AdBanner vertical={true} />
Inside my AdBanner component I have:
export default function AdBanner(props) {
const [adWidth, setAdWidth] = useState("100%");
const [adHeight, setAdHeight] = useState("90px");
const [adSpacing, setAdSpacing] = useState(2);
const [adDirection, setAdDirection] = useState("row");
useEffect(() => {
if (props.vertical) {
console.log("ola");
setAdWidth("320px");
setAdHeight("480px");
setAdSpacing(5);
setAdDirection("column");
}
}, [props.vertical]);
return (
<>
<Paper
variant="outlined"
sx={{ width: { xs: "100%", md: adWidth }, overflow: "hidden" }}
>
...
My goal is, when I don't specify a value for the "vertical" property my component has certain characteristics (like height, width, ... ). But in some parts of my application I want a set of others values for the same property.
I was getting some errors, with the help of #guilfer I was able to eliminate these errors.
Can anyone tell me if what I did is correct? Thanks.
Here the full code: https://github.com/brunovjk/saude-vapor
Thank you.
There are some things on your code that you can't actualy do in javascript. When a variable is defined using the "var", it has global scope. Here is an explanation about the differences: https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/
After that, there are some other things that we don't actualy do in React, usualy in your case, there would be two different classes with the style you want, then, for aplying the style you could do something similar to this:
import style from "style.module.css"
export default function AdBanner(props) {
return <div className={props.vertical? style.firstClass : style.secondClass}>banner content<div>
}.firstClass {
...one css styles
}
.secondClass {
...another css style
}