React_Help_Needed

#1

I am having trouble with an assignment. I am almost there but there is a part of the assignment that is giving me grief. It reads:

  • Create an additional three blocks containing the same height and width
    • When I click on these blocks, it should cycle between red fill with a blue border, blue fill with a green border, and green filled with a red border.

Does anyone have any insight? I would be more than happy to show what I already have, which is basically three empty boxes.

By the way, I’m using react in websphere.

Thanks, in advance!

#2

Can you link to a project and/or show the code you have tried?

#3

I suspect this is where you’re having the trouble, and that you’re OK with creating blocks that have the same height and width.

When I click on these blocks, it should cycle between red fill with a blue border, blue fill with a green border, and green filled with a red border.

So, you click on any of the boxes and they all change fill colors and border colors, or just the one you clicked on? By cycling, do you mean with each click?

Have you tried using state to keep track of click events, fill colors, border colors, etc,…?

#4

This is the App.js file:

import React from ‘react’;
//import Rectangle from ‘./components/Rectangle’;
import style from ‘./components/Block’;
import ‘./style/App.css’;
import Block from ‘./components/Block’

function App(props) {

const [toggle, setToggle] = React.useState(props.color);
const[color,setColor]=React.useState(props.color);
const onClick = ()=> {
    setColor("red");
    if(color="red"){
        setColor("blue")
    }
};

return (

    <div style={style.rectangle}></div>
    <div style={style.rectangle}></div>
    <div style={style.rectangle}></div>


    <div style={style.block1}></div>
    <div style={style.block2}></div>
    <div style={style.block3}></div>

    {toggle}
    <div style={style.block} />
    <div style={style.block}></div>
    <div style={style.block}></div>



</div>

);
}

export default App;

#5

This is the Block.js file:

const style={
block: {
borderStyle: “solid”,
borderWeight: “2px”,
height: “100px”,
width: “100px”,
},

block1:{
    borderStyle:"solid",
    borderWeight: "2px",
    height: "100px",
    width: "100px",
    backgroundColor: "red",
    borderColor: "orange"

},
block2:{
    borderStyle:"solid",
    borderWeight: "2px",
    height: "100px",
    width: "100px",
    backgroundColor: "orange",
    borderColor: "red"

},

block3:{
    borderStyle:"solid",
    borderWeight: "2px",
    height: "100px",
    width: "100px",
    backgroundColor: "black",
    borderColor: "white"


},
rectangle:{
    backgroundColor:"cadetBlue",
    borderColor:"orange",
    borderStyle:"dashed",
    borderWeight: "3px",
    height: "100px",
    width: "500px"
},

};

export default style;

#6

Yes. According to the instructions, each click should cycle through the colors.

#7

by the way, I am new at this. so please forgive my novice questions.

#8

One thing you could try doing is toggling through different class names for the elements, so that upon clicking, a new/updated class name would be given to an element, which would give the element a new background color and border color according to its new/updated class.

#9

That’s what I’ve been trying to do, but I erased what I had because it didn’t work. I’ll keep trying.

#10

But if there are some examples or websites that you know of that I could study that would be great. This class does not have a textbook.

#11

There are lots of examples out there, but here’s one to get you started:

#12