How to change style of a hook?

Question

I have an if statement that sets a Hook, but I want to besides varying the text inside also vary the style, is it possible? here is the code

const [ageLabel, setAgeLabel] = useState('Age');

const testDate = () => {
    let day = parseInt(dayText);
    let month = parseInt(monthText);
    let year = parseInt(yearText);
    setAgeLabel('Age');
    let label = 'Age - Please Enter a Valid Year';
    if (dayText === '' || monthText === '' || yearText === '') {
      setAgeLabel('Age - Please Enter a Valid Date');
    } else if (day < 1 || day > 31) {
      setAgeLabel('Age - Please Enter a Valid Day');
    } else if (month < 1 || month > 12) {
      setAgeLabel('Age - Please Enter a valid Month');
    } else if (year < 1900 || year > 2020) {
      setAgeLabel('Age - Please Enter a Valid Year');
    } else {
      saveUserCardData();
    }
  };

and when SaveUserCardData is called it saves the data, but I would like to change the font and color from the ageLabel, how can I do it?

Thanks!

score 0 · Answer 1 · answered Nov 23 '21 at 15:02

This might help

function App() {
  const [data, setData] = useState({label: 'Age', style: {color: 'black'}});

  useEffect(() => {
    testDate();
  });

  const testDate = () => {
    let day = parseInt(dayText);
    let month = parseInt(monthText);
    let year = parseInt(yearText);
    // setData({label: 'Age', style: {color: 'black'}});
    // let label = 'Age - Please Enter a Valid Year';
    if (dayText === '' || monthText === '' || yearText === '') {
      setData({label: 'Age - Please Enter a Valid Date', style: {color: 'red'}});
    } else if (day < 1 || day > 31) {
      setData({label: 'Age - Please Enter a Valid Day', style: {color: 'red'}});
    } else if (month < 1 || month > 12) {
      setData({label: 'Age - Please Enter a valid Month', style: {color: 'red'}});
    } else if (year < 1900 || year > 2020) {
      setData({label: 'Age - Please Enter a Valid Year', style: {color: 'red'}});
    } else {
      saveUserCardData();
    }
   };

  return (
    <View>
      <Text style={data.style}> {data.label}</Text>
    </View>
    );
  }

How to change style of a hook?

1 Answers1