Ufdjrw

I'm new to react, so forgive me. I'm having a problem understanding states, specifically those of children.

Purpose: I'm trying to create a form that a user can append more and more components -- in this case, images.

What happens: User appends 2 or more images. User tries to upload an image with UploadButton component, but both the images are the same. I believe this has to do with both appended children sharing the same state.

Question: How do I give each appended child its own image without affecting the other appended children?

class Page extends Component
 constructor (props) 
 super(props);

 this.state = 
 id: '', 
 numChildren: 0,
 images: [],
 
 this.onAddChild = this.onAddChild.bind(this);
 

 showModal() 
 this.setState(
 numChildren: 0,
 images: [],
 );
 

 renderModal() 
 const children = [];
 //Here's my array of child components
 for(var i = 0; i < this.state.numChildren; i += 1) 
 children.push(<this.ChildComponent key=i />);
 

 return (
 <ReactModal>
 <this.ParentComponent addChild=this.onAddChild>
 children
 </this.ParentComponent>
 </ReactModal>
 )
 }

 onAddChild = () => 
 this.setState(
 numChildren: this.state.numChildren + 1
 )
 

 ParentComponent = (props) => (
 <div>
 props.children
 <Button onClick=props.addChild>Add Item</Button>
 </div>
 );

 ChildComponent = () => (
 <div>
 <UploadButton
 storage="menus"
 value=this.state.images
 onUploadComplete=uri => this.setState(images: uri)
 />
 </div>
 );
}

Here's the code for UploadButton:

import React, Component from 'react';
import uuid from 'uuid';
import firebase from '../config/firebase';

class UploadButton extends Component 

 constructor(props) 
 super(props);

 this.state = 
 isUploading: false
 
 

 handleClick() 
 const input = document.createElement("INPUT");
 input.setAttribute("type", "file");
 input.setAttribute("accept", "image/gif, image/jpeg, image/png");
 input.addEventListener("change", (target: files: [file]) => this.uploadFile(file));
 input.click();
 

 uploadFile(file) 
 console.log('F', file);
 const id = uuid.v4();
 this.setState( isUploading: true )
 const metadata = 
 contentType: file.type
 ;
 firebase.storage()
 .ref('friends')
 .child(id)
 .put(file, metadata)
 .then(( downloadURL ) => 
 this.setState( isUploading: false )
 console.log('Uploaded', downloadURL);
 this.props.onUploadComplete(downloadURL);
 )
 .catch(e => this.setState( isUploading: false ));

 

 render() 
 const 
 props: 
 value,
 style = ,
 className = "image-upload-button",
 ,
 state: 
 isUploading 
 
 = this;

 return (
 <div 
 onClick=() => this.handleClick()
 className=className
 style=
 ...style,
 backgroundImage: `url("$this.props.value")`, 
 >
 isUploading ? "UPLOADING..." : !value ? 'No image' : ''
 </div>
 );
 




export default UploadButton;

I tried to exclude all unnecessary code not pertaining to my problem, but please, let me know if I need to show more.

EDIT: This is my attempt, it doesn't work:

//altered my children array to include a new prop
renderModal() 
 const children = [];
 for (var i = 0; i < this.state.numChildren; i += 1) 
 children.push(<this.ChildComponent imageSelect=this.onImageSelect key=i />);
 
 //...
;

//my attempt to assign value and pass selected image back to images array
ChildComponent = () => (
 <div>
 <UploadButton
 storage="menus"
 value=uri => this.props.onImageSelect(uri) //my greenness is really apparent here
 onUploadComplete=uri => this.setState(images: uri)
 /> 
 //...
 </div>
);

//added this function to the class
onImageSelect(uri) 
 var el = this.state.images.concat(uri);
 this.setState(
 images: el
 )

I know I'm not accessing the child prop correctly. This is the most complexity I've dealt with so far. Thanks for your time.

When you write this.state in Child / Parent component, you are actually accessing the state of Page. Now, I would recommend that you pass in the index of the child to the Child like so

children.push(<this.ChildComponent key=i index=i/>)

so that each children deals with only its own image like so

ChildComponent = (index) => (
 <div>
 <UploadButton
 storage="menus"
 value=this.state.images[index]
 onUploadComplete=uri => 
 let images = this.state.images.slice()
 images[index] = uri
 this.setState(images)
 
 />
 </div>
 );