Tengo un componente React que representa una grid como esta:

 for (let i=0; i<items.length; i++) { if (filterItem(items[i])) { rows.push( <div className="row" key={items[i]._id} id={items[i]._id} onClick={props.onClick}> {props.db !== "videos" && <div className="centered">{items[i].level}</div>} {props.db === "questions" && <div className="centered left">{items[i].question}</div>} {props.db !== "questions" && <div className="centered left">{items[i].instructions}</div>} <div className="centered" onClick={props.delete}><FontAwesomeIcon icon={ faTrashAlt }/></div> </div> ); } }

Muestro algunos elementos de diferentes bases de datos y, según la base de datos, los campos no son los mismos. Necesito implementar el controlador onClick que previsualizará un video (en caso de que se muestre la base de datos de videos) u obtenga el valor de identificación de la fila de la cuadrícula (en caso de que se muestre cualquier otra base de datos)

Mi código actual se ve así:

 handleClick(e) { if (this.state.database === "videos") { this.setState(state => ({ videoPreview: this.getDbItem(e.target.innerText).link })) } else if (e.target.parentElement.id) { this.editMode(e.target.parentElement.id) //get id of the row div } }

y funciona, pero parece mal...

¿Hay una mejor manera de hacer esto?