CODEWITHSUNDEEP
cssreactjsreact-props
Zahin
Zahin

Reputation: 318

How to pass custom style for props in react using the map statement?

I am trying to create a custom inline style for each div section mentioned in the code below. The primary reason is to scale the images down accordingly using css. I created a prop object and passed data through the array. However is there any way i can pass the style through the array of props?

I have tried to implement the styles using the array as the same way for the other props. However cant implement and dont really know how this works since I am quite new to the react prop system.

The div i am trying to map

 <div className= "row text-center text-md-left">
    {
        teamData.members && teamData.members.map((item) => {
            return (
                <div className="col-xl-6 col-lg-12 mb-5 d-md-flex justify-content-between">
                    <div className="avatar mb-md-0 mb-4 mx-4 team" style = {{ width: "80%", height: "100%" }}>
                        <img  src={require(`./img/${item.image}.jpg`)} className="rounded z-depth-1" style = {{ width: "100%", height: "100%" }} alt="avatar"/>
                    </div>

                    <div className="mx-4">
                        <h4 className="font-weight-bold mb-3">{item.name}</h4>
                        <h6 className="font-weight-bold grey-text mb-3">{item.role}</h6>
                        <p className="grey-text">{item.description}</p>
                    </div>
                </div>
            )
        })
    }
</div>

The prop i am trying to pass is in the component

let teamData = {
    "members" : [
        {
            "name": "XYZ",
            "role": "XYZ",
            "description": "ZYX",
            "image": 'ZYX',                
        }
    ]
}

Now is there any way i can pass the custom style for each prop using style as props in the teamData prop and map onto each component. Any kind of help towards the prop system is also appreciated if the solution cant be provided. Thanks!

Upvotes: 0

Views: 2210

Answers (1)

Harsh Chaturvedi
Harsh Chaturvedi

Reputation: 759

my guess is you want to pass style props to your components.So just pass the style object from main component and use it in style statement of your children component.
for ex:if i wanna sent blue color style to a component i will do
<Signin styless={{'color':'blue'}} />
in the main app and in the children component
const styles=this.props.styless <input style={styles} >
this will apply reqired style to your components.hope this helps.

Upvotes: 0

Related Questions