React : Inline styles

 import React, { useState } from 'react';

import Button from '../../UI/Button/Button';

import './CourseInput.css';

const CourseInput = props => {

  const [isvalid,setIsvalid]=useState(true);

  const [enteredValue, setEnteredValue] = useState('');

  const goalInputChangeHandler = event => {

    setEnteredValue(event.target.value);

  };

  const formSubmitHandler = event => {

    event.preventDefault();

    if(enteredValue.trim().length===0){

      setIsvalid(false)

      return;

    }else{  setIsvalid(true);}

    props.onAddGoal(enteredValue);

  };

  return (

    <form onSubmit={formSubmitHandler}>

      <div className="form-control">

        <label style={{color:!isvalid?"red":"black"}}>Course Goal</label>

        <input  style={{borderColor:!isvalid?"red":"black",background:!isvalid?"salmon":"transparent",}} type="text"

onChange={goalInputChangeHandler} />

      </div>

      <Button type="submit">Add Goal</Button>

    </form>

  );

};

export default CourseInput;