Alternate styling based on prop value in a React Component not working

Question

I have a Display component which should display an item. The item should have text-decoration-line css property which styles it with a text-docoration-line: line-through when the Available prop is false and styles it with a text-docoration-line: none when the Available prop is true. But the component is not working as expected. Below is the component code. What could be the issue.

const Display = ({ item, Available}: { item: string, Available: boolean }) => {
  return (
    <div>
      <div
        style={
          Available
            ? { textDecorationLine: "none" }
            : { textDecorationLine: "line-through" }
        }
      >
        {item}
      </div>
    </div>
  );
};

Answer 1

I figured it out.

The component has no error, it should work perfectly with the correct prop types passed.

In my case the component Display was receiving boolean prop Available as a string 'true' or 'false' instead of true or false.

If you're faced with a similar problem you might want to confirm if the prop types being passed to your component during runtime are of string type instead of boolean type.