尝试有条件地映射对象数组

Question

I'm trying to conditionally render some content on a screen. Basically, I have an array of 3 objects with some sub objects. This main object is stored in my reducer as the initial state (it is some dummy data). I have a Sidenav bar which has some links and I want to render some content to the right side of the side nav. I am using a custom sidenav so it may look a bit confusing, but my problem is I need to somehow map this array of 3 objects so I can render each object based on which link the user clicks. I will post the portion of the object that I am looking at (I actually posted a question about this earlier if you want to see the whole object). I'm a jr. dev so I'm sure this isn't something too complex.

import React, { Component } from 'react';
import { connect } from 'react-redux';
import ReduxBurgerMenu from '../components/Menu';
import Chosen from '../components/Chosen';

class ExampleMenu extends Component {

  onClickDevices = (props) => {
    let devices = this.props.product;
    console.log(devices)
  }

  onClickLaptops = (props) => {
    let laptops = this.props.product[1];
    console.log(laptops)
  }

  onClickMobile = (props) => {
    let mobile = this.props.product[2];
    console.log(mobile)
  }

  onClickAny = (props) => {
    let devices = this.props.product;
    devices.map(obj => {
      return Object.keys(obj).map(key => {
        return (
          <tr>
            <td>{key}</td>
            <td>{obj[key]}</td>
          </tr>
        )
      })
    })
  }

    render () {
        let first = Object.keys(this.props.menu.products)[0];
        let second = Object.keys(this.props.menu.products)[1];

        return (
            <ReduxBurgerMenu isOpen={ this.props.isOpen }>
                <a href="javascript:void(0)">{this.props.menu.title}</a>
                <a href="javascript:void(0)">{this.props.menu.description}</a>
                <a href="javascript:void(0)">{first}</a>
                <a href="javascript:void(0)">{second}</a>
                <button onClick={this.onClickDevices} id="Devices" className="menu-item" href="/">Devices</button>
                <button onClick={this.onClickAny} id="Laptop" className="menu-item" href="/laptops">{}</button>
                <button onClick={this.onClickMobile} id="Mobile" className="menu-item" href="/mobile">Mobile</button>
                <Chosen />
            </ReduxBurgerMenu>
        );
    }
}

// {JSON.stringify(this.props.products)}

const mapStateToProps = state => {
  return {
    menu: state.reducer.menu,
    product: state.reducer.menu.products.product
  }
}

export default connect(mapStateToProps)(ExampleMenu);

---

and here is the object I am working with through the reducer

const initialState = {
  menu: {
        title: "Menu title",
        description: "Menu description",
        products: {
          title: "Products title",
          description: "Product description",
          product: [
            {
              device: {
                title: "Device title",
                description: "Device description",
                types: [
                  {
                    name: "Modem",
                    title: "Modem title",
                    description: "Modem description"
                  },
                  {
                    name: "charger",
                    title: "charger title",
                    description: "charger description"
                  }
                ]
              }
            },
            {
              laptop: {
                title: "Laptop title",
                description: "Laptop description",
                types: [
                  {
                    name: "Apple",
                    title: "Apple title",
                    description: "Apple description"
                  },
                  {
                    name: "Lenevo",
                    title: "Lenevo title",
                    description: "Lenevo description"
                  }
                ]
              }
            },
            {
              mobile: {
                title: "Mobile title",
                description: "Mobile description",
                types: [
                  {
                    name: "Samsung",
                    title: "Samsung title",
                    description: "Samsung description"
                  },
                  {
                    name: "Nokia",
                    title: "Nokia title",
                    description: "Nokia description"
                  }
                ]
              }
            }
          ]
        }
      }
};

The product array with the 3 objects is what I was referring to. I also have some random functions just to see if I was getting the data or not with console.logs but ideally I want to use that onClickAny function to render either of the three objects on the right side (maybe in a list) based on whether someone clicked the devices, mobile, or laptop buttons. Please, any help would be greatly appreciated!

Answer 1

You can use a state such as deviceType and change it to laptop when laptop is clicked. And render it like

{ this.state.deviceType === 'mobile' && <div>Render this</div>}
{ this.state.deviceType === 'web' && <div>Render this thing</div>}

Does that make sense?

Let's start with an easy example:

onClickDevices = (props) => {
    let devices = this.props.product[0];
    let types = devices.types;
    return types.map((type) => {
       return (
         <tr>
            <td>{type.name}</td>
            <td>{type.title}</td>
            <td>{type.description</td>
         </tr> ) }

  }

Are you trying to do something like the above?

Answer 2

Make ExampleMenu as parentComponent to RightSideOfTheNav component (this is where you want to display your device info) or you can use your Chosen component

Add state to your ExampleMenu component

state = {
    requiredDevice: {}
} 

Update your button in your JSX

<button onClick={() => this.onClickAny('device')} id="Devices" className="menu-item" href="/">Devices</button>
<button onClick={() => this.onClickAny('laptop')} id="Laptop" className="menu-item" href="/laptops">Laptop</button>
<button onClick={() => this.onClickAny('mobile')} id="Mobile" className="menu-item" href="/mobile">Mobile</button>

Here we are passing arguments to this.onClickAny('devices') statically.

Update your onClickAny method

onClickAny = (productType) => {
    let devices = this.props.product;
    var requiredDevice = devices.find(itemDevice => itemDevice.hasOwnProperty(productType))[productType]
    // if 'device' is passed as 'productType' 
    // var requiredDevice = devices.find(itemDevice => itemDevice.hasOwnProperty('device'))['device']
    // it returns
     // {
     //     title: "Device title",
     //     description: "Device description",
     //     types: [
     //              {
     //                name: "Modem",
     //                title: "Modem title",
     //                description: "Modem description"
     //              },
     //              {
     //                name: "charger",
     //                title: "charger title",
     //                description: "charger description"
     //              }
     //            ]
     // }
    this.setState({
        requiredDevice
    })
  }

Add in your JSX in your render()

{ (Object.keys(this.state.requiredDevice).length > 0) && <RightSideOfTheNav device={this.state.requiredDevice} /> }

or maybe in your case it is Chosen component so

{ (Object.keys(this.state.requiredDevice).length > 0) && <Chosen device={this.state.requiredDevice} /> }

And Use device as props in your Chosen or RightSideOfTheNav component

Hope this is what you need.

Answer 3

You will have to store the selected category( device , laptop or mobile ) in your component's state :

this.state = {
    selection: 'device'
}

Now give your button's a function pre-configured with the category they represent :

<button onClick={this.changeSlection('device')} id="Devices" className="menu-item" >Devices</button>
<button onClick={this.changeSlection('laptop')} id="Laptop" className="menu-item" >Laptop</button>
 <button onClick={this.changeSlection('mobile')} id="Mobile" className="menu-item" >Mobile</button>

And now, the new function to set your state depending on which one got clicked :

changeSlection = selection => ev => {
    this.setState({ selection })
}

To get the data you want, use the find function to know what object contains the selected key :

const selectedProduct = product.find(p => p[selection])[selection]

Fully functional example :

 class App extends React.Component { constructor(props) { super(props) this.state = { selection: 'device', product: [ { device: { title: "Device title", description: "Device description", types: [ { name: "Modem", title: "Modem title", description: "Modem description" }, { name: "charger", title: "charger title", description: "charger description" } ] } }, { laptop: { title: "Laptop title", description: "Laptop description", types: [ { name: "Apple", title: "Apple title", description: "Apple description" }, { name: "Lenevo", title: "Lenevo title", description: "Lenevo description" } ] } }, { mobile: { title: "Mobile title", description: "Mobile description", types: [ { name: "Samsung", title: "Samsung title", description: "Samsung description" }, { name: "Nokia", title: "Nokia title", description: "Nokia description" } ] } } ] } } changeSlection = selection => ev => { this.setState({ selection }) } render() { const { product, selection } = this.state const selectedProduct = product.find(p => p[selection])[selection] return ( <div> <button onClick={this.changeSlection('device')} id="Devices" className="menu-item" >Devices</button> <button onClick={this.changeSlection('laptop')} id="Laptop" className="menu-item" >Laptop</button> <button onClick={this.changeSlection('mobile')} id="Mobile" className="menu-item" >Mobile</button> <h5>{selectedProduct.title}</h5> <p>{selectedProduct.description}</p> {/* <MyComponent data={selectedProduct}/> */} </div> ) } } ReactDOM.render(<App/>, document.getElementById('root')) 

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