I'm using Semantic-UI-React in my React/Rails project and trying to use a Form.Select drop down menu within a larger form within a modal. I need to get the .id (animal.id) value from the selection showing the user .name (animal.gnames) -- gnmaes is just an attribute I'm using for my own purposes to avoid confusion.
I'n the options= prop of Form.Select, I map over an array of items and then assign item.gname to title to get a nice dropdown list of names for the user. I then need to get the id which is in this big array and send that to a fetch request. I've tried every combination of props but can't get the id out of the array and at the same time display names.
Here is the code. I chopped of the last half since it's not relevant to the problem:
import React, { Component } from "react";
import { withRouter } from "react-router-dom"
import ActiveStorageProvider from 'react-activestorage-provider'
import { Menu, Button, Modal, Header, Icon, Image, Form, Input, Select, Label } from "semantic-ui-react"
import { Link } from "react-router-dom"
const value = null
const options = null
class Navigation extends Component {
state = { modalOpen: false,
title: "",
body: "",
animal: "",
geotag: false,
animals: []
};
componentDidMount() {
fetch('http://localhost:9000/api/v1/animals')
.then(r => r.json())
.then(animals => {
this.setState({ animals: animals })
})
};
handlechange = (event) => {
this.setState({ [event.target.name]: event.target.value })
};
submitForm = (event) => {
this.props.postSighting(this.state.title, this.state.body)
// NEED TO GET ANIMAL.ID IN HERE!!!
};
// THIS METHOD IS READY TO GO FOR DOING THE ITERATION AND SET STATE BUT COULD NOT GET IT OT WORK.
// HAD ISSUE WITH A FETCH AND SET STATE LOOP CALLS
selectAnimal = () => {
const mappedAnimals = this.state.animals.map(animal => {
this.setState({ animal: animal.gname })
})
return mappedAnimals
};
render () {
return (
//.......SKIP TO THE CODE THAT MATTERS
({
return
name: animal.id,
key: animal.id,
value: animal.id,
text: animal.gname
}))}
/> // HOW DO I GET ANIMAL.ID TO MY SUBMIT FORM FUNCTION?
JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)