React js - creating a parent component with variable amount of child

Problem: Had a “option” box I was creating where there could be any number of “tags” that can be added for that option.

Solution: Created a context local to the parent/children components only, kept a separate variable to manually track how many “groups” of options has been requested by the user. Used an array of objects and updated according to index which is sent in as a prop to each set of options. Example code

// in RewriteAjaxInput.js which contains the parent and children.
// variables to be used in context

const [ruleArrayObject, setRuleArrayObject]=useImmer([
        {
            optionalBase:"default1",
            tag:"tag1",
            regexPattern:"static"
        }
    ]);
const [numberOfRules,setNumberOfRules]=React.useState(1);

// created context

<ReWriteAjaxRulesContext.Provider value={[ruleArrayObject, setRuleArrayObject,numberOfRules,setNumberOfRules]}>
   <ReWriteAjaxRules />
</ReWriteAjaxRulesContext.Provider>


// also in same class is the button to add more sets of options
// that method is below:
    const addRule=(e)=>{
        // do something
        setRuleArrayObject(draft=>{draft.push(
            {
                optionalBase:"dsf",
                tag:"sdfsf",
                regexPattern:"static"
            }

        )});

        setNumberOfRules(numberOfRules+1);
    }

// it basically adds another dummy object 
//to the array and increases numberOfRules count to +1

// in RewriteAjaxInput.js which contains the parent and children.

// variables to be used in context

const [ruleArrayObject, setRuleArrayObject]=useImmer([

{

optionalBase:"default1",

tag:"tag1",

regexPattern:"static"

}

]);

const [numberOfRules,setNumberOfRules]=React.useState(1);

// created context

<ReWriteAjaxRulesContext.Provider value={[ruleArrayObject, setRuleArrayObject,numberOfRules,setNumberOfRules]}>

</ReWriteAjaxRulesContext.Provider>

// also in same class is the button to add more sets of options

// that method is below:

const addRule=(e)=>{

// do something

setRuleArrayObject(draft=>{draft.push(

{

optionalBase:"dsf",

tag:"sdfsf",

regexPattern:"static"

}

)});

setNumberOfRules(numberOfRules+1);

}

// it basically adds another dummy object

//to the array and increases numberOfRules count to +1

Here are the Parent and child components

Parent:

// ReWriteAjaxRules ( parent )
import React from "react";
import ReWriteAjaxRule from "./ReWriteAjaxRule";
import ReWriteAjaxRulesContext from "../../../../contexts/ReWriteAjaxRulesContext";
";

const ReWriteAjaxRules= props=>{
  

const createLayout=()=>{
    let result=[];
    for(let i=0;i<numberOfRules;i++){

        result.push(<ReWriteAjaxRule
        index={i}
        />)
    }

return result;
    }
    return(  <div>
        {createLayout()}
    </div>);
}

export default ReWriteAjaxRules;

// ReWriteAjaxRules ( parent )

import React from "react";

import ReWriteAjaxRule from "./ReWriteAjaxRule";

import ReWriteAjaxRulesContext from "../../../../contexts/ReWriteAjaxRulesContext";

const ReWriteAjaxRules= props=>{

const createLayout=()=>{

let result=[];

for(let i=0;i<numberOfRules;i++){

result.push(<ReWriteAjaxRule

index={i}

/>)

}

return result;

}

return( <div>

{createLayout()}

</div>);

}

export default ReWriteAjaxRules;

Child:

//ReWriteAjaxRule ( child )
import React from "react";
import {InputLabel, MenuItem, Select, TextField} from "@material-ui/core";
import ReWriteAjaxRulesContext from "../../../../contexts/ReWriteAjaxRulesContext";

const ReWriteAjaxRule= props=>{
    const [ruleArrayObject, setRuleArrayObject,numberOfRules,setNumberOfRules]=React.useContext(ReWriteAjaxRulesContext);

    const sendBaseUpdate=(e)=>{
      // we do the below check on e.target.value to avoid edge cases 
      // where rerendered elements return a null value for e.target.value
        let newValue=e.target.value?e.target.value:"";

       // uses immer instead of state so it's easier to mutate a 
       // particular index in the array 
        setRuleArrayObject(draft=> {
            draft[props.index].optionalBase = newValue;
        } );

    }
    const sendTagUpdate=(e)=>{
        let newValue=e.target.value?e.target.value:"";
        setRuleArrayObject(draft=> {
            draft[props.index].tag = newValue;
        } );

    }
    const sendRegexPatternUpdate=(e)=>{
        let newValue=e.target.value?e.target.value:"";
        setRuleArrayObject(draft=> {
            draft[props.index].regexPattern = newValue;
        } );

    }
    return(  <div className={"reWriteRuleRow"}>
        <TextField label="Base:"
                   helperText="Optional Base of Rewrite"
                   value={ruleArrayObject[props.index].optionalBase}
                   onChange={sendBaseUpdate}
                   type="text"
                   style={{marginRight:"10px"}}
        />
        <TextField label="GET Variable:"
            // helperText="Shortcode tag in the content. e.g. [tag]"
                   value={ruleArrayObject[props.index].tag}
                   onChange={sendTagUpdate}
                   type="text"
                   style={{marginLeft:"10px"}}
        />
        <InputLabel >
            Get Variable Type(regex):
            <Select
                labelId="label"
                id="select"
                value={ruleArrayObject[props.index].regexPattern}
                onChange={sendRegexPatternUpdate}
                style={{marginLeft:"10px"}}
            >
                <MenuItem value="static">Static Value</MenuItem>
                <MenuItem value="any">Any Value</MenuItem>
                <MenuItem value="digit">Only digit Value</MenuItem>
            </Select>
            {/*<br/><small>Self-closing shortcode: [tag]</small>*/}
            {/*<br/><small>Enclosing shortcode: [tag]content[/tag]</small>*/}
        </InputLabel>

    </div>);
}

export default ReWriteAjaxRule;

//ReWriteAjaxRule ( child )

import React from "react";

import {InputLabel, MenuItem, Select, TextField} from "@material-ui/core";

import ReWriteAjaxRulesContext from "../../../../contexts/ReWriteAjaxRulesContext";

const ReWriteAjaxRule= props=>{

const [ruleArrayObject, setRuleArrayObject,numberOfRules,setNumberOfRules]=React.useContext(ReWriteAjaxRulesContext);

const sendBaseUpdate=(e)=>{

// we do the below check on e.target.value to avoid edge cases

// where rerendered elements return a null value for e.target.value

let newValue=e.target.value?e.target.value:"";

// uses immer instead of state so it's easier to mutate a

// particular index in the array

setRuleArrayObject(draft=> {

draft[props.index].optionalBase = newValue;

} );

}

const sendTagUpdate=(e)=>{

let newValue=e.target.value?e.target.value:"";

setRuleArrayObject(draft=> {

draft[props.index].tag = newValue;

} );

}

const sendRegexPatternUpdate=(e)=>{

let newValue=e.target.value?e.target.value:"";

setRuleArrayObject(draft=> {

draft[props.index].regexPattern = newValue;

} );

}

return( <div className={"reWriteRuleRow"}>

<TextField label="Base:"

helperText="Optional Base of Rewrite"

value={ruleArrayObject[props.index].optionalBase}

onChange={sendBaseUpdate}

type="text"

style={{marginRight:"10px"}}

<TextField label="GET Variable:"

// helperText="Shortcode tag in the content. e.g. [tag]"

value={ruleArrayObject[props.index].tag}

onChange={sendTagUpdate}

type="text"

style={{marginLeft:"10px"}}

Get Variable Type(regex):

<Select

labelId="label"

id="select"

value={ruleArrayObject[props.index].regexPattern}

onChange={sendRegexPatternUpdate}

style={{marginLeft:"10px"}}

<MenuItem value="static">Static Value</MenuItem>

<MenuItem value="any">Any Value</MenuItem>

<MenuItem value="digit">Only digit Value</MenuItem>

</Select>

{/*<br/><small>Self-closing shortcode: [tag]</small>*/}

{/*<br/><small>Enclosing shortcode: [tag]content[/tag]</small>*/}

</InputLabel>

</div>);

}

export default ReWriteAjaxRule;

Online Journal

My online journal about design and development related topics and what I've learned.

React js – creating a parent component with variable amount of child components.