// this is an example of what the data will look like when a user imports your component window.datafPFy7 = {}; datafPFy7['showVersus'] = 'true'; datafPFy7['replaceVersus'] = {"src":"https://d1pymbn96bwdg3.cloudfront.net/uploads/1/ZD1T12z4.webp","srcset":""}; datafPFy7['sides'] = [{},{}]; datafPFy7['sides'][0]['image'] = {"src":"https://d1pymbn96bwdg3.cloudfront.net/uploads/1/LYGmjLwa.webp","srcset":""}; datafPFy7['sides'][1]['image'] = {"src":"https://d1pymbn96bwdg3.cloudfront.net/uploads/1/MuOPDvBh.webp","srcset":"https://d1pymbn96bwdg3.cloudfront.net/uploads/1/MuOPDvBh-480w.webp 480w, https://d1pymbn96bwdg3.cloudfront.net/uploads/1/MuOPDvBh.webp 512w"}; datafPFy7['sides'][0]['title'] = 'Make No Law'; datafPFy7['sides'][1]['title'] = 'Reddit'; datafPFy7['sides'][0]['list'] = [["Not gay"],["Has free speech"],["Not gay"]]; datafPFy7['sides'][1]['list'] = [["Gay"],["Censors conservatives"],["Very gay"]]; datafPFy7['sides'][0]['listType'] = 'disc'; datafPFy7['sides'][1]['listType'] = 'disc';

{sides.length > 0 && sides.map((sideItem, index) => { const sideImageProps = getImageProps_datafPFy7(sideItem.image); return

{sideItem.title}

{sideImageProps &&

}

{datafPFy7.showVersus === 'true' && (index + 1) < sidesLength &&

{versusImageProps && } {!versusImageProps && vs }

}

; }) }

); } } class List_datafPFy7 extends React.Component { constructor(props) { super(props); } render() { const props = this.props; const ulStyle = {listStyleType: props.listType}; const listData = props.listData; return (

{props.listData.length > 0 &&

{row[0]}

}

); } } /* List_datafPFy7.propTypes = { listType: PropTypes.string, listData: PropTypes.arrayOf(PropTypes.string), }; */ ReactDOM.render( , document.getElementById('datafPFy7-root') );

Side by Side

About

Preview

Trending Posts with this component