Rethabile Rethabile - 8 days ago 5
React JSX Question

Style properties on react components

I have a component that is being repeated and the only reason its being repeated is because of the icon, color, and text.

import React from 'react';
const TabOne = () =>{
return (
<div className="irequest-tabs users">
<span className="tabOne"><i className="fa fa-sitemap navbuttonIcon" aria-hidden="true"></i>
<span className="hidden-sm hidden-xs">I want to...</span></span>
</div>
);
}
export default TabOne


I wanted to see if there was a way to make those properties on the component so that my component when used would look like:

<Tab1 color="#fff" icon="fa fa-sitemap" text="I want too..." />


I've tried:

import React from 'react';
const TabOne = () =>{
return (
<div style={{color: props.color}} className="irequest-tabs users">
<span className="tabOne"><i className={props.icon} className="navbuttonIcon" aria-hidden="true"></i>
<span className="hidden-sm hidden-xs">{props.text}</span></span>
</div>
);
}
export default TabOne

leo leo
Answer

Almost there, just pass props as argument to TabOne (I'll simplify your markup for readability).


const TabOne = (props) => {
  return (
    <div style={{color: props.color}}>
       <i className={props.icon}></i>
       <span>{props.text}</span>
    </div>
  );
}

export default TabOne;

Remember, a functional component gets the properties passed by its parent as args to the function.