Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

125
Views
Passing props.color on inline style - React

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
about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

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"} />
about 4 years ago · Juan Pablo Isaza Report

0

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
about 4 years ago · Juan Pablo Isaza Report

0

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;
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!