Pasar datos por el estado - Historial de revisiones

Nacho en 14:52 21 ago 2020

2020-08-21T14:52:06Z

Nacho en 20:12 20 ago 2020

2020-08-20T20:12:36Z

Nacho en 20:11 20 ago 2020

2020-08-20T20:11:50Z

Nacho en 23:31 16 ago 2020

2020-08-16T23:31:24Z

Nacho: Página creada con «Categoría:React class Album extends React.Component { state = { data: [{ imgUrl:"https://images-assets.nasa.gov/image/PIA03240/PI…»

2020-08-16T23:29:58Z

Página creada con «Categoría:React <syntaxhighlight lang="js"> class Album extends React.Component { state = { data: [{ imgUrl:"https://images-assets.nasa.gov/image/PIA03240/PI…»

Página nueva

[[Categoría:React]]
<syntaxhighlight lang="js">
class Album extends React.Component {
state = {
data: [{
imgUrl:"https://images-assets.nasa.gov/image/PIA03240/PIA03240~thumb.jpg",
nasa_id: "PIA03240",
keywords: "Mars,Mars Exploration Rover MER",
description:"Synthetic image of the Opportunity Mars Exploration Rover inside produced using Virtual Presence in Space technology.",
},],};
render() {
return (
<ul>
{this.state.data.map(foto => {
return (
<li><p>{foto.keywords}</p></li>);
})}
</ul>
);
}}
export default Album;
</syntaxhighlight>

@@ Línea 24: / Línea 24: @@
 == En un componente==
 Aqui se pasa los arreglos que están traídos al estado mediante componentDidMount(), pasados por map al <CarouselItem>
-<syntaxhighlight lang="js">
+<syntaxhighlight lang="jsx">
 render() {
      return (

@@ Línea 22: / Línea 22: @@
 export default Album;
 </syntaxhighlight>
-== en un componente==
+== En un componente==
 Aqui se pasa los arreglos que están traídos al estado mediante componentDidMount(), pasados por map al <CarouselItem>
 <syntaxhighlight lang="js">

@@ Línea 1: / Línea 1: @@
 [[Categoría:React]]
 <syntaxhighlight lang="js">
 class Album extends React.Component {
@@ Línea 21: / Línea 22: @@
 export default Album;
 </syntaxhighlight>

@@ Línea 14: / Línea 14: @@
       {this.state.data.map(foto => {
        return (
-         <li><p>{foto.keywords}</p></li>);
+         <li  key={foto.nasa_id}><p>{foto.keywords}</p></li>);
       })}
      </ul>