CODEWITHSUNDEEP
javascriptfunctionreact-nativereact-hooksexpo
T.M.
T.M.

Reputation: 45

How do i change the state of another button onPress onReact Native?

I have 2 buttons which if pressed, change their background color. If i press both, they both change background color. I'd like to switch background color between the two (e.g. if i press one, the other one goes back to original state) How can i achieve that? `

const [color, setColor] = useState("false");
const [font, setFont] = useState("#505050");
const [color2, setColor2] = useState(false);
const [font2, setFont2] = useState("#505050");

function onClick() {
    const colors = [
      "#ff6700",
      "#ffffff"
    ]

if ( colors.indexOf(color) === 0 ) {
    setColor(colors[1]); 
} else {
    setColor(colors[0]); 
}

const fonts = [
  "#ffffff",
  "#505050"
]
if ( fonts.indexOf(font) === 0 ) {
    setFont(fonts[1]); 
} else {
    setFont(fonts[0]); 
}
}

function onClick2() {
    const colors2 = [
      "#ff6700",
      "#ffffff"
    ]

if ( colors2.indexOf(color2) === 0 ) {
    setColor2(colors2[1]); 
} else {
    setColor2(colors2[0]); 
}

const fonts2 = [
  "#ffffff",
  "#505050"
]
if ( fonts2.indexOf(font2) === 0 ) {
    setFont2(fonts2[1]); 
} else {
    setFont2(fonts2[0]); 
    }
}

Upvotes: 0

Views: 717

Answers (3)

Ken Pham
Ken Pham

Reputation: 295

Hope this helps you. If not, let me know.

My solution is quite messy and not really good code. I hope it can give you some idea. A different idea is you can use useRef to mark the current ref of the button's color. From there setState conditionally based on those refs

Also you should check your code again. You should use useState(false) not "false"

const [color, setColor] = useState(null);
const [color2, setColor2] = useState(null);


const onClick = (button) => {

    if(button == 1){
        if(color2 == "changed color"){
            setColor("color 1");
            setColor2("origin color");
        }else{
            setColor("color 1");
        }
    }else{
        if(color1 == "changed color"){
            setColor2("color 2");
            setColor("origin color");
        }else{
            setColor2("color 2");
        }
    }


}

Then pass it like this:

<button onClick={() => onClick(1)}>Button 1</button>
<button onClick={() => onClick(2)}>Button 2</button>

Upvotes: 1

Gh05d
Gh05d

Reputation: 8982

You basically need conditional logic to check whether the other button is active. You can do it like this:

  const App = props => {
      const [color, setColor] = React.useState(false);
      const [color2, setColor2] = React.useState(false);

      const toggle = function () {
        if (color) {
          setColor(false);
        } else {
          setColor(true);
          setColor2(false);
        }
      };

      const toggle2 = function () {
        if (color2) {
          setColor2(false);
        } else {
          setColor2(true);
          setColor(false);
        }
      };

      return (
        <div>
          <button
            style={{ backgroundColor: color ? "#ff6700" : "#ffffff" }}
            onClick={toggle}
          >
            Button1
          </button>
          <button
            onClick={toggle2}
            style={{ backgroundColor: color2 ? "#ff6700" : "#ffffff" }}
          >
            Button2
          </button>
        </div>
      );
    };

Here is a codepen for you to try it out.

Upvotes: 0

Rohan Mukherjee
Rohan Mukherjee

Reputation: 290

From what I understood, you want to change the colors of both buttons upon clicking just one. One way to do it could be:

<button onClick={() => {onClick1(); onClick2();}}>Button 1</button>
<button onClick={() => {onClick1(); onClick2();}}>Button 2</button>

Or you could even call the other function in the function itself. Like:

function onClick1() {
    ...
    onClick2();
}

Hope this helps.

Upvotes: 0

Related Questions