in Education by
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)

1 Answer

0 votes
by
There's a lot going on here so let me try to break this down part by part in the code comments. Let me know if something is not clear. 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 }); }); } /** * When a user selects an option in the dropdown, the following will happen: * 1. this.handlechange gets called * 2. Component's state gets updated to look like: * { * ...state, * "Animal": * } * Side note: you will have to access this "Animal" value through this.state.Animal * where the uppercase 'A' is very important. This is really prone to typos and not * recommended. To fix this I would change your to have a lowercase * name attribute. */ handlechange = (event, { name, value }) => { // We need to use { name, value } instead of event.target.name, etc // due to how Semantic UI handles events. More info here: // https://github.com/Semantic-Org/Semantic-UI-React/issues/638 this.setState({ [name]: value }); }; submitForm = event => { this.props.postSighting(this.state.title, this.state.body); // Recall from above that this.state.Animal contains the animal id currently selected // so we can access it directly with this.state.Animal const animalId = this.state.Animal; // do stuff with animalId... }; /** * If this is called, it will destroy the array of animals you have in your state and replace it with a gname * from one of the animals. You probably don't want this to happen. * Not sure what you are trying to do here, what do you use the return value for? * Also, this will return an array filled with 'undefined' since you don't return anything in the animals.map callback. */ selectAnimal = () => { const mappedAnimals = this.state.animals.map(animal => { this.setState({ animal: animal.gname }); }); return mappedAnimals; }; render() { return ( //.......SKIP TO THE CODE THAT MATTERS ({ // return: was this a typo? name: animal.id, key: animal.id, value: animal.id, // This is the value that gets passed to 'handlechange' as event.target.value text: animal.gname }))} /> ); } }

Related questions

0 votes
    I'm using Semantic-UI-React in my React/Rails project and trying to use a Form.Select drop down ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 9, 2022 in Education by JackTerrance
0 votes
    I have an Enum package com.javarnd.bbms.enums; public enum BloodTypeEnum { A_PLUS(1, "A+"), ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 22, 2022 in Education by JackTerrance
0 votes
    I'm having a small issue with setting the initial value of a dropdown. The code below is the view ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Mar 2, 2022 in Education by JackTerrance
0 votes
    This is a Dropdown control where I am binding the data, after bind I am putting the select statement. ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Feb 13, 2022 in Education by JackTerrance
0 votes
    I want to put a value from database because my dropdown already have a value the same as the text ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Jun 30, 2022 in Education by JackTerrance
0 votes
    I have the automata S'-> S S -> a | XbY X -> ε | aZ | Y Y -> b | XX z ... JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 3, 2022 in Education by JackTerrance
0 votes
    In a certain city, 5% of all the persons in town have unlisted phone numbers. If you select 100 names at ... directory, how many people selected will have unlisted phone numbers?...
asked Feb 12, 2021 in Education by JackTerrance
0 votes
    I have a jsp with two drop down location and department. The value of department dropdown is populated ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Feb 18, 2022 in Education by JackTerrance
0 votes
    (b) Which tool is used to select irregular shapes? (i) Selection tool (ii) Lasoo Tool (iii) Pen Tool (iv) Pencil Tool Select the correct answer from above options...
asked Dec 1, 2021 in Education by JackTerrance
0 votes
    What are the feature selection methods used to select the right variables?...
asked Apr 26, 2021 in Technology by JackTerrance
0 votes
    What I'm trying to do should be something extremly simple but still I cannot seem to get it done ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 3, 2022 in Education by JackTerrance
0 votes
    What is the virtual DOM? How does react use the virtual DOM to render the UI?...
asked Dec 5, 2020 in Technology by JackTerrance
0 votes
    I have a large django form. It has a lot of data that depends on a field being selected. Eg: Do ... , JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Mar 2, 2022 in Education by JackTerrance
0 votes
    I'm trying to fetch some data from the REST API of HP Alm. It works pretty well with a small ... , JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 2, 2022 in Education by JackTerrance
0 votes
    Greetings! I have a DropDownList within a FormView which are bound to XmlDataSources: In the page's ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Mar 11, 2022 in Education by JackTerrance
...