Avatar billede Morten Professor
05. juni 2022 - 07:08 Der er 1 løsning

Props og component React

Hej

Håber der er nogen der kan hjælpe med at løse mit problem jeg har kæmpet med længe.
Jeg har en component i react, har et problem med at lave en props ud fra den component så jeg kan genbruge denne kode som laver en select boks og values i den, jeg har en hardcoded string i den lige nu men vil gerne gøre det mere dynamisk.

Min kode til component
import React, { Component } from "react";
export default class UserSelections extends Component {

    constructor(props) {
        super(props);

        this.state = {
            items: [],
            DataisLoaded: false,

        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);


    }
    handleChange(event) {
        this.setState({value: event.target.value});
    }

    handleSubmit(event) {
        alert('du har trykket på: ' + this.state.value);
        event.preventDefault();
    }
    // ComponentDidMount is used to
    // execute the code
    componentDidMount() {
        fetch(
            "URL")
            .then((res) => res.json())
            .then((json) => {
                this.setState({
                    items: json,
                    DataisLoaded: true
                });
            })
    }
    render() {
        const { DataisLoaded, items } = this.state;
        if (!DataisLoaded) return <div>
            <h1> Vent et øjeblik... </h1> </div> ;

        return (
            <div className = "App">
                <h1> Fetch data from an api in react </h1>
                <form onSubmit={this.handleSubmit}>
                    <label><select name={this.state.slug} value={this.state.value} onChange={this.handleChange}>
                {                                                    Vil gerne lave en variable her
                                                                      til
                                                                      props

                items.filter(slug => slug.slug === 'bygnings-st' ).map((item, index) => (

                        <option value={ item.outputvalue }  key={index}>{ item.outputvalue }</option>

                ))
            }</select>
            </label>
            <input type="submit" value="Submit" />
                </form>
            </div>
        );
    }

}

Har lavet fed skrift ved hardcode value.

Min kode i App så jeg kan se resultatet:

import React from "react";
import UserSelections from "./components/UserSelections";
import './App.css';

function App() {
  return (
    <div className="App">
kunne godt tænke mig at kunne lave en props hvis muligt så jeg skriver value her:
      <UserSelections Her: stringValue="bygnings-st" />
    </div>
  );
}

export default App;

Håber der er en der har en løsning jeg ved simpelthen ikke hvad jeg skal gøre.

Med venlig hilsen
Morten
Avatar billede Morten Professor
06. juni 2022 - 07:12 #1
Har løst det lukker tråd
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester





CIO
Stort CIO-interview: Lemvigh-Müllers milliard-omsætning er blevet digital
Job & Karriere
Her er Netcompanys nye hovedkvarter: Flytter til ikonisk adresse i hjertet af København - kommer til at betale million-leje