Cloudinary most recent image is overwriting all form images displayed on screen?-CodePudding

I am having my issue with my React app, it's a simple form that allows user to upload their images then it will be shown on screen, now when I upload an image what happens is all the images will become one which is the most recent uploaded one.

the way the app is set up: I have a full crud operation on a react app that stores data in state and saves it in mongodb, I added a url key in the state object, with cloudinary I added another state to store the image uploaded. I am trying to see if I can update the state url key value with the value from cloudinary so I would only get the most recent uploaded image.

    export default function App() {
  const [state, setState] = useState({
    tracks: [{ track:"",artist:"", album:"", year:"", url:""}],
    newTrack:{
      track:"",
      artist:"",
      album:"",
      year:"",
      url:"",
    },
    editMode: false
  });

const [userState, setUserState] = useState({
  user: null
})

const [image, setImage] = useState('')
    const FormPage = (props) => {

const [imageSelected, setImageSelected] = useState('');

const uploadImage = () => {
    const formData = new FormData()
    formData.append('file', imageSelected)
    formData.append('upload_preset', 'musicimages')

    Axios.post(
        '   https://api.cloudinary.com/v1_1/dklcmfo0q/image/upload', formData)
    .then((res) => {
        props.setImage(res.data.url);
      // console.log(res.data.url)
      })
};

CodePudding user response：

Would you please try by removing "props" for this line?

props.setImage(res.data.url);

Thanks, Mo

CodePudding user response：

Solved. passed the image url from the image state to the handleCHange function as an extra parameter that would then set state with the image url as a string just like I had in the backend mongodb schema. it gets stored in mongodb with an id so it would match the form input details. kinda proud, it took me three days lol