React - toggle text and class in an HTML element?-CodePudding

I am trying to create a system where I can easily click a given sentence on the page and have it toggle to a different sentence with a different color upon click. I am new to react native and trying to figure out the best way to handle it. So far I have been able to get a toggle working but having trouble figuring out how to change the class as everything is getting handled within a single div.

const ButtonExample = () => {
 const [status, setStatus] = useState(false);

 return (
   <div className="textline" onClick={() => setStatus(!status)}>
     {`${status ? 'state 1' : 'state 2'}`}
     
   </div>
   
 );
};

How can I make state 1 and state 2 into separate return statements that return separate texts classes but toggle back and forth?

CodePudding user response：

you can just create a component for it, create a state to track of toggle state and receive style of text as prop

in React code sandbox : https://codesandbox.io/s/confident-rain-e4zyd?file=/src/App.js

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

export default function ToggleText({ text1, text2, className1, className2 }) {
  const [state, toggle] = useState(true);
  const className = `initial-style ${state ? className1 : className2}`;
  return (
    <div className={className} onClick={() => toggle(!state)}>
      {state ? text1 : text2}
    </div>
  );
}

in React-Native codesandbox : https://codesandbox.io/s/eloquent-cerf-k3eb0?file=/src/ToggleText.js:0-465

import React, { useState } from "react";
import { Text, View } from "react-native";
import styles from "./style";
export default function ToggleText({ text1, text2, style1, style2 }) {
  const [state, toggle] = useState(true);
  return (
    <View style={styles.container}>
      <Text
        style={[styles.initialTextStyle, state ? style1 : style2]}
        onPress={() => toggle(!state)}
      >
        {state ? text1 : text2}
      </Text>
    </View>
  );
}

CodePudding user response：

This should be something you're looking for:

import React from "react"

const Sentence = ({ className, displayValue, setStatus }) => {
  return (
    <div
      className={className}
      onClick={() => setStatus((prevState) => !prevState)}
    >
      {displayValue}
    </div>
  );
};

const ButtonExample = () => {
  const [status, setStatus] = React.useState(false);

  return status ? (
    <Sentence
      className="textLine"
      displayValue="state 1"
      setStatus={setStatus}
    />
  ) : (
    <Sentence
      className="textLineTwo"
      displayValue="state 2"
      setStatus={setStatus}
    />
  );
};

You have a Sentence component that takes in three props. One for a different className, one for a different value to be displayed and each will need access to the function that will be changing the status state. Each setter from a hook also has access to a function call, where you can get the previous (current) state value, so you don't need to pass in the current state value.

Sandbox