Passing props.color on inline style

I'm trying to pass a color to my text, but it's not applying. If I change to Card.props.color, it works, but the parameter props is never read.

const Card = (props) => {
    return (
        <div>
           <p style={{color: props.color}}>Random text</p> 
        </div>
    )
}

Card.props = {
    color: 'blue'
}


export default Card

CodePudding user response：

you should not write this code as this is mutating the props object that react use.

Card.props = {color : 'blue'}

for proper usage the props are passed where you would be using the Card component

<Card color=  {"blue"} />

CodePudding user response：

You can set the default props

const Card = (props) => {
    return (
        <div>
           <p style={{color: props.color}}>Random text</p> 
        </div>
    )
}

Card.defaultProps = {
    color: 'blue'
}


export default Card

CodePudding user response：

You can assign your default prop values to the defaultProps property or even better take advantage of the default function parameters since your component is a function.

const Card = ({ color = 'blue' }) => {
  return (
    <div>
      <p style={{ color }}>Random text</p> 
    </div>
  )
}

export default Card;