如何将对象作为道具传递给 React.js 中的子功能组件？

Question

I have this code with a config file testType :

import React, { Component } from 'react';
import Select from "./components/Select/Select";

class App extends Component {
  state = {
    testType : [
      {value : "test1", name : "Test1"},
      {value : "test2", name : "Test2"},
    ]
  }
    render() {
        return (
            <>
              <Select {...this.state.testType}/>
              <Select {...this.state.testType}/>
            </>
            );
    }
}
export default App;

Which I use to pass as props to a Select Component, below is the code for it Select.js :

import React from "react";
const selectoption = (props) => (
<select className="custom-select">
    <option value={props.value}>{props.name}</option>
</select>
);

export default selectoption;

But it does not work, I don't see the props test1 and test2 in the select element.

Answer 1

The problem in your code is when you are doing <Select {...this.state.testType}/> the below is the data that will be received as prop in the Select component. So basically the array is getting converted to below format in the Select component.

{
  "0": {
    "value": "test1",
    "name": "Test1"
  },
  "1": {
    "value": "test2",
    "name": "Test2"
  }
}

So, instead of spreading it that way if it's being passed as list={[...this.state.testType]} then the passed array can be accessed in Select component as props.list or in the component itself it can be spread like const Select = ({ list }) => {...} . The passed list can be looped through using Array.map and then render all the options.

 const { Component, Fragment } = React; class App extends Component { state = { testType: [ { value: "test1", name: "Test1" }, { value: "test2", name: "Test2" } ] }; render() { return ( <Fragment> <Select list={[...this.state.testType]} /> <Select list={[...this.state.testType]} /> </Fragment> ); } } const Select = ({ list }) => ( <select className="custom-select"> {list.map(option => ( <option key={option.value} value={option.value}>{option.name}</option> ))} </select> ); ReactDOM.render(<App />, document.getElementById("react"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script> <div id="react"></div>

For more info about rendering list elements in React please refer here .

Answer 2

I hope you are doing well. I've just read your descriptions carefully. Data you have passed through props is an array of objects. So in the selectoption components the "prop" is an array of objects. You cannot find "value" and "name" of this props. You must map this array to get data of each options.

Or you can change the code like this.

<Select {...this.state.testType[0]}/>

<Select {...this.state.testType[1]}/>

Answer 3

Thank you for your vote. I am a dedicated and reliable Full-Stack Developer with over 10 years of experience in Web Development. I have strong skills and experience with React,Vue,Angular Frontend Development and Backend Development with RESTful APIs using Node.js and Laravel. I can help you with my strong development skills. You will be happy with my quality of code and fast delivery. I am full time available and I can overlap at least 8 hrs a day in your timezone.