Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Combine two React files into one

I have two files that return html fragments. They are identical except for the image. The fact is that the server has different paths to the playlist image and the genre image.

props.items.images[0].url

and

props.items.icons[0].url

because of this, I had to distribute this code to two different files. How could I combine them into one?

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel


    const playListClick = e => {
        props.onClick(e.target.title);
    }    

    return (
        <section id={props.selectedValue} className="collum collum__hidden" onClick={playListClick}>
        <a className="link__decoration link__track hover__track link__one" href="#">
          <div>
            {props.items.map((item, idx) => 
            <div className="container" key={idx + 1} title={item.id} >
              <div className="content__track" title={item.id}>
                <img className="img__tarck" title={item.id} src={item.images[0].url}/>
                <div className="name" title={item.id}>{item.name}</div>
              </div>
            </div>)}
          </div> 
        </a>
        </section>
    );
}
const Genre = props => {    

const genreClick = e => {
    props.onClick(e.target.title);
}

return (
    <section id={props.selectedValue} className="collum collum__hidden" onClick={genreClick}>
    <a className="link__decoration link__track hover__track link__one" href="#">
      <div>
        {props.items.map((item, idx) => 
        <div className="container" key={idx + 1} title={item.id}>
          <div className="content__track" title={item.id}>
            <img className="img__tarck" title={item.id} src={item.icons[0].url}/>
            <div className="name" title={item.id}>{item.name}</div>
          </div>
        </div>)}
      </div> 
    </a>
    </section>
);

>Solution :

You can use a Conditional (ternary) Operator to look if icons exists and if not fallback to using the image. Further assistance is hard due to not knowing the surrounding circumstances.

        <img className="img__tarck" title={item.id} src={item.icons ? item.icons[0].url : item.images[0].url}/>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading