CODEWITHSUNDEEP
reactjs
HunterListInsight
HunterListInsight

Reputation: 79

React component deeper structure and props

Beginner here...

I'm trying to refactor my (otherwise working app) so I won't need to repeat the same code over and over... Here is the situation (I'm pasteing just crucial part of the code)

First component maps items from API via fetch:

<Slider>

// Slider 1
{pool .map(item => 
    <div className="entry">
      <Pills type={item.type.abb} description={item.type.description} />
      /* ETC */
    </div>
)}

// Slider 2
{pool .map(item => 
    <div className="entry">
      <Pills type={item.type.abb} description={item.type.description} />
      /* ETC */
    </div>
)}

// Slider 3
{pool .map(item => 
    <div className="entry">
      <Pills type={item.type.abb} description={item.type.description} />
      /* ETC */
    </div>
)}

// ETC

In second one I have layout and props:

const Pills = props => {
return (

  <div className="panel-header-icons">
    <div className="pills">
      <span
        className={"label-blue " + props.type_abb + '-bg'},
        title={props.type_description}
      >
        {props.type_abb}
      </span>
    </div>
  </div>

)

}

What I would like to do is to only have one slider element and display item values from another component.

{pool .map(item => 
   <SliderOne />
</div>
)}
//ETC

I know there are basics but I'm just stuck here. I would be really glad if you could at least just point me what part of React functionality am I missing here. Thank you...

Upvotes: 1

Views: 41

Answers (1)

otto
otto

Reputation: 2033

Just create a new Component.

export default ({children, item})=>{
  return(
  <div>
      <Pills type={item.type.abb} description={item.type.description} />
      {children}
  </div>  
)
}

Then you use it like this:

<Slider item={item}>etc</Slider>

Upvotes: 1

Related Questions