React Native: How to modify a variable state while there is already a state?-CodePudding

I want to create 4 buttons and when I click on one of them, a text will appeare while the other texts disappered.

However, when I click with my solution, the text is still the same. I can change the initial values but I can't change after.

Here is my code:

  const [couleur, setCouleur] = useState("");
  var [state, setState] = useState({
    v1Visible: false,
    v2Visible: false,
    v3Visible: true,
    v4Visible: false,
  });
  async function cop() {
    await navigator.clipboard.writeText(couleur);
    alert("Couleur copiée");
  }

  useEffect(() => {
    if (couleur !== "") {
      cop();
    }
  }, [couleur]);

  state = {
    v1Visible: false,
    v2Visible: false,
    v3Visible: false,
    v4Visible: true,
  };

The couleur part here is the other state. It is necessary and is the first part of my page.

          <Text style={styles.texteti}>Heading, paragraphe, lien</Text>
          <TouchableOpacity
            onPress={() =>
              setState({
                v1Visible: false,
                v2Visible: true,
                v3Visible: false,
                v4Visible: false,
              })
            }
          >
            <Text>Here</Text>
          </TouchableOpacity>
          {state.v1Visible && (
            <View>
              <Text>View 1</Text>
            </View>
          )}
          {state.v2Visible && (
            <View>
              <Text>View 2</Text>
            </View>
          )}
          {state.v3Visible && (
            <View>
              <Text>View 3</Text>
            </View>
          )}
          {state.v4Visible && (
            <View>
              <Text>View 4</Text>
            </View>
          )}
        </View>

texteti: {
    fontSize: 16,
    marginLeft: "7%",
    fontWeight: "600",
  },

CodePudding user response：

Hi i think better to declare your state variable like this and set selected value in another state, you can more simplify this answer, i hope it works for you

var [state, setState] = useState([
      'v1Visible',
      'v2Visible',
      'v3Visible',
      'v4Visible',
  ]);
 const [selected,setSelected]=useState("")

   {...}

     <Text style={styles.texteti}>Heading, paragraphe, lien</Text>
      {state.map(i=> <TouchableOpacity
        onPress={(i) =>
         setSelected(i)
        }
      >
        <Text>{i} Here</Text>
        
      </TouchableOpacity>)}
      {selected=="v1Visible" && (
        <View>
          <Text>View 1</Text>
        </View>
      )}
      {selected=="v2Visible" && (
        <View>
          <Text>View 2</Text>
        </View>
      )}
      {selected=="v3Visible" && (
        <View>
          <Text>View 3</Text>
        </View>
      )}
      {selected=="v4Visible" && (
        <View>
          <Text>View 4</Text>
        </View>
      )}
    </View>

CodePudding user response：

You should only change state of state with setState method.

So remove this part:

state = {
  v1Visible: false,
  v2Visible: false,
  v3Visible: false,
  v4Visible: true,
};

The correct way to update state at this moment would have been:

setState({
  v1Visible: false,
  v2Visible: false,
  v3Visible: false,
  v4Visible: true,
});