CODEWITHSUNDEEP
javascriptreactjs
Somethingwhatever
Somethingwhatever

Reputation: 1348

Passing props from Parent to child and loop using map in React?

I have 3 components. One is my main Component named Rules which stores the state. I am importing another component in it named container and in my container i have another component named Actions. So i am trying to pass an array from Rules to Actions so i can loop over it. So the structure is rules -> container -> actions.

This is what my Rules component looks like:

import React from 'react'
import container from "./container.jsx
class Rules extends Component {
      constructor(props) {
       super(props);
         this.state = {
           actions: [
            { name: 'Function', value: [ 1,2,3,4,5 ] },
            { name: 'Old Value', value: [1,2,3,4,5] },
            { name: 'New Value', value: [ 1,2,3,4,5 ] }
        ]
       }
      render() {
         <container actionState = { this.state.actions } />
       }
     }
   }

My Container Component looks like this:

import Actions from "./Actions"
import secondary from './secondary'
import React from 'react'
const container = ( props ) => {
     <secondary />
     <Actions rules = { props.actions }   />
    }
export default container

and my Actions Component looks like this:

import React from 'react'
const actions = ( props ) => {
   <span> I want to loop and print title here : { props.name } <span>
   <select> <option> { props.value} </option> </select> </span>
}
export default actions

I am still fairly new to React so any help will be appreciated. Thank You.

Upvotes: 0

Views: 2433

Answers (3)

Ahmed Yousif
Ahmed Yousif

Reputation: 2348

I have changed some names and syntax errors 

import React, { Component } from "react";
import Container from "./Container.jsx";
class Rules extends Component {
  constructor(props) {
    super(props);
    this.state = {
      actions: [
        { name: "Function", value: [1, 2, 3, 4, 5] },
        { name: "Old Value", value: [1, 2, 3, 4, 5] },
        { name: "New Value", value: [1, 2, 3, 4, 5] }
      ]
    };
  }
  render() {
    return <Container actions={this.state.actions} />;
  }
}

export default Rules;

container component

import Actions from "./Actions";
import React from "react";
const container = props => {
  return <Actions actions={props.actions} />;
};
export default container;

Actions component 

 import React from "react";

const Actions = props => {
  const mapOptions = (value) =>value.map( (v,i) => <option key={i} value={v}> {v} </option>);

  return props.actions.map((action,i) =><><span>{ action.name }</span><select key={i}>{mapOptions(action.value) }</select></>);

};

export default Actions;

Upvotes: 3

kennyvh
kennyvh

Reputation: 2854

Correct me if I'm wrong, but it looks like you're trying to create a <select> dropdown for each rule in your Rules component.

You can create an Action component by mapping over each rule in actionState in your container component like this:

container component

import Actions from "./Actions"
import secondary from './secondary'
import React from 'react'

const container = ( props ) => {
   { /* This will create a component `Action` for each rule in your `actions` */ }
   { props.actionState.map(rule => <Actions rule={rule} />) }
}

export default container

Then you can render a dropdown from each rule in your Action component like this:

Actions Component

import React from 'react'
const actions = ( props ) => {
   <div>
      <p>{props.rule.name}</p>
      <select>
         { /* create an option for each number in `values` for the a single rule */ }
         { props.rule.values.map(num => <option key={num} value={num}>{num}</option>) }
      </select>
   </div>
}
export default actions

Upvotes: 0

Alexandre LEROY
Alexandre LEROY

Reputation: 2280

your loop should be in your container component try something like this:

const container = ( props ) => {
    props.forEach(action => <Actions rules = { action.name }  />)
}

Upvotes: 0

Related Questions