Çözüldü React state hatam nedir?

oynozan dedi:

Her Component'in kendi State'leri vardır. Sen parent Component'i kullanmadan diğer butonların State'lerini değiştirmeye çalışmışsın. Kodunu şu şekilde değiştir:

JavaScript:Panoya kopyala

import "./styles.css";
import { useState } from "react";

export default function App() {
 const [check, setCheck] = useState({
 first: false,
 second: false,
 third: false
 });

 function handleClick(target) {
 let obj = { ...check }; // Clone object
 for (let key of Object.keys(obj)) {
 if (target !== key) obj[key] = false;
 else obj[key] = true;
 }
 setCheck(obj);
 }

 return (
 <div className="App">
 <Button check={check.first} onClick={() => handleClick("first")} />
 <Button check={check.second} onClick={() => handleClick("second")} />
 <Button check={check.third} onClick={() => handleClick("third")} />
 </div>
 );
}

function Button({ check, onClick }) {
 return <button onClick={onClick} className={check ? "green" : "red"}>Test</button>;
}

UseRef ile çok daha temiz bir kod yazabilirsin ama sanırım React'ta yenisin o yüzden sadece State'leri kullandım.

Genişletmek için tıkla...

mahmutxd07 dedi:

Hocam useRef ile nasıl yapabilirim? Zahmet olmaz ise bir örnekte öyle atar mısınız?

Genişletmek için tıkla...

import "./styles.css";
import { useRef, forwardRef  } from "react";

export default function App() {
  const buttons = useRef([]);
  const buttonCount = 3;

  function handleClick(el) {
    buttons.current.forEach(button => {
      button.className = "red";
    })
    el.className = "green";
  }

  return (
    <div className="App">
      {[...Array(buttonCount).keys()].map((v, i) => {
        // Create 3 buttons
        return <Button ref={el => buttons.current[i] = el} onClick={e => handleClick(e.target, i)} />
      })}
    </div>
  );
}

const Button = forwardRef((props, ref) => {
  return <button onClick={props.onClick} ref={ref}>Test</button>;
});

mahmutxd07 dedi:

Arkadaşlar elimde 3 adet button var. Ben bunlardan birisine tıkladığımda o yeşil olsun diğerleri kırmızı olsun istiyorum. Ama state yöntemi ile bunu yapamıyorum.

Kodları;

youthful-ace-9z3vw2 - CodeSandbox

youthful-ace-9z3vw2 by hdogukanozkan using loader-utils, react, react-dom, react-scripts

codesandbox.io

İstediğim ekran görüntüsü;

Eki Görüntüle 1870891

Genişletmek için tıkla...

oynozan dedi:

Her component'in kendi state'leri vardır. Sen parent component'i kullanmadan diğer butonların state'lerini değiştirmeye çalışmışsın. Kodunu şu şekilde değiştir:

JavaScript:Panoya kopyala

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [check, setCheck] = useState({
    first: false,
    second: false,
    third: false
  });

  function handleClick(target) {
    let obj = { ...check }; // Clone object
    for (let key of Object.keys(obj)) {
      if (target !== key) obj[key] = false;
      else obj[key] = true;
    }
    setCheck(obj);
  }

  return (
    <div className="App">
      <Button check={check.first} onClick={() => handleClick("first")} />
      <Button check={check.second} onClick={() => handleClick("second")} />
      <Button check={check.third} onClick={() => handleClick("third")} />
    </div>
  );
}

function Button({ check, onClick }) {
  return <button onClick={onClick} className={check ? "green" : "red"}>Test</button>;
}

useRef ile çok daha temiz bir kod yazabilirsin ama sanırım React'ta yenisin o yüzden sadece state'leri kullandım.

Genişletmek için tıkla...

const handleClick = (button) => {    
    setCheck({      
        first: false,      
        second: false,      
        third: false,      
        [button]: true    
    });
};