logo
down
shadow

Dynamically generate components based on array of objects


Dynamically generate components based on array of objects

By : Finalmarco
Date : November 20 2020, 03:01 PM
will help you It seems the issue is that you are not wrapping time in quotes in your handlebars, so it is looking for a property named time on the component itself, instead of the string "time". Also, I don't think you need to use the component helper here, since you are hardcoding the component name in anyways. Here is your hbs edited in this regard
code :
<div>
  {{#each possibleSettings as |setting|}}
    {{#if (eq setting.type "time")}}
      {{menu-component/time}}
    {{else if (eq setting.type "sound")}}
      {{menu-component/sound}}
    {{/if}}
  {{/each}}
</div>
{{#each possibleSettings as |setting|}}
  {{component (concat 'menu-component/' setting.type)}}
{{/each}}


Share : facebook icon twitter icon
Dynamically generate UI Components using Array of Structures in C#

Dynamically generate UI Components using Array of Structures in C#


By : TSq
Date : March 29 2020, 07:55 AM
I wish did fix the issue. In WPF it is possible to directly map controls to be shown against objects, so for example I currently have,
code :
<DataTemplate DataType="{x:Type ViewModel:Clock_t}">
     <View:Clock_tView/>
</DataTemplate>
<ItemsControl ItemsSource="{Binding m_voltageChannels}"/>
<ItemsControl ItemsSource="{Binding m_voltageChannels}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="{Binding ChannelName}"/>
                    <CheckBox Content="Is available?" 
                         IsChecked="{Binding available}"/>
                </StackPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
Is it possible to loop through an array to dynamically generate react components?

Is it possible to loop through an array to dynamically generate react components?


By : stephelectric
Date : March 29 2020, 07:55 AM
I wish this help you Not sure the title is totally clear (wasn't sure how to phrase it) so let me explain. , You can use a helper function then:
code :
 render(){
   var links = ['DashboardLink', 'CoursesLink', 'AssignmentsLink'];
   var findComponent: function (name){
     switch (name){
         case 'DashboardLink':
             return (<DashboardLink />);
         case 'CoursesLink':
             return (<CoursesLink />);
         case 'AssignmentsLink':
             return (<AssignmentsLink />);
         default:
             return null; //You might want to return something else here//
     }
   }; 
   return (
     <div>
       links.map((Link) => {
         return findComponent(Link);
       }
     </div>
  );
}
render(){
   var links = ['DashboardLink', 'CoursesLink', 'AssignmentsLink'];
   return (
     <div>
       links.map((Link) => {
         return React.createElement(Link, {key: Link});
       }
     </div>
  );
}
Forming the components based on the array of objects

Forming the components based on the array of objects


By : user3116924
Date : March 29 2020, 07:55 AM
hope this fix your issue You can refactor your Setting component to allow it to renders your switches name and value according to the data received from the API. I will suggest you add an id to each of your switches group, that will ease your work. Here is forked working sandbox. The code can be uptimzed to befit your usecase. The key changes are done in the Setting Component.
Setting Component Full code
code :
import React, { Component, Fragment } from "react";
import isEqual from "lodash.isequal";

import ChildSwitch from "./ChildSwitch";
import ParentSwitch from "./ParentSwitch";
import { PARTIAL } from "./constant";

export default class Setting extends Component {
  state = {
    parent: {
      value:
        this.props.children.length > 1
          ? PARTIAL
          : this.props.children[0].isEnabled
    },
    children: this.props.children
  };

  componentDidMount() {
    this.setParentSwitchValue();
  }

  shouldComponentUpdate(nextProps, nextState) {
    return !isEqual(this.state, nextState);
  }

  setChildSwitchValue = (id, isEnabled) => {
    let clickedChild;
    this.setState(
      prevState => ({
        ...prevState,
        children: prevState.children.map(child => {
          if (child.id === id) {
            clickedChild = { ...child, isEnabled: isEnabled };
            return clickedChild;
          } else {
            return child;
          }
        })
      }),
      () => this.setParentSwitchValue(clickedChild)
    );
  };

  setParentSwitchValue = clickedChild => {
    const { children } = this.state;
    let parentVal = PARTIAL;

    if (children.every(({ isEnabled }) => isEnabled === true)) {
      parentVal = true;
    }
    if (children.every(({ isEnabled }) => isEnabled === false)) {
      parentVal = false;
    }

    this.setState(
      prevState => ({
        ...prevState,
        parent: {
          value: parentVal
        }
      }),
      () => {
        this.handleChange();
        if (clickedChild) {
          const changed = {
            parent: {
              name: this.props.name,
              value: parentVal
            },
            child: clickedChild
          };
          console.log("This is the changed child", changed);
        }
      }
    );
  };

  setChildrenValue = value => {
    this.setState(
      prevState => ({
        ...prevState,
        parent: {
          value
        },
        children: prevState.children.map(child => ({
          ...child,
          isEnabled: value
        }))
      }),
      this.handleChange
    );
  };

  handleChange = () => {
    const { id, onChange } = this.props;
    onChange(id, this.state);
  };

  handleParentClick = parentVal => {
    if (parentVal !== PARTIAL) {
      this.setChildrenValue(parentVal);
    }
  };

  render() {
    const { parent, children } = this.state;
    const { name } = this.props;
    return (
      <div className="boxed">
        <span>{name}</span>
        <ParentSwitch
          childrenCount={children.length}
          parentSwitch={parent.value}
          onSelect={this.handleParentClick}
        />
        {children.map(({ id, name, isEnabled }) => (
          <Fragment key={id}>
            <span>{name}</span>
            <ChildSwitch
              switchName={id}
              selected={isEnabled}
              onSelect={this.setChildSwitchValue}
            />
          </Fragment>
        ))}
      </div>
    );
  }
}
Dynamically generate return type based on array parameter of objects in TypeScript

Dynamically generate return type based on array parameter of objects in TypeScript


By : rmax
Date : March 29 2020, 07:55 AM
To fix this issue The other answers here have identified the issue: TypeScript will tend to widen the inferred type of a string literal value from its string literal type (like "bar") to string. There are different ways to tell the compiler not to do this widening, some of which are not covered by the other answers.
One way is for the caller of foo() to annotate or assert the type of "bar" as "bar" and not string. For example:
code :
const annotatedBar: "bar" = "bar";
const resultAnnotated = foo([{ fieldName: annotatedBar }]);
resultAnnotated.baz; // error as desired

const resultAssertedBar = foo([{ fieldName: "bar" as "bar" }]);
resultAssertedBar.baz; // error as desired
const resultConstAsserted = foo([{ fieldName: 'bar' } as const]);
resultConstAsserted.baz; // error as desired
declare function foo<
    S extends string, // added type parameter
    T extends { fieldName: S },
    >(arr: T[]): Record<T['fieldName'], undefined>;
const result = foo([{ fieldName: "bar" }]);
result.baz; // error as desired
declare function foo<S extends string>(arr: { fieldName: S }[]): Record<S, undefined>;

const result = foo([{ fieldName: "bar" }]);
result.baz; // error as desired
How to generate forms dynamically based on the model objects in TurboGears?

How to generate forms dynamically based on the model objects in TurboGears?


By : elect2
Date : March 29 2020, 07:55 AM
To fix this issue TurboGears2 provides automatic form generation using Sprox.
You can also automatically generate full CRUD interfaces using tgext.crud.
shadow
Privacy Policy - Terms - Contact Us © voile276.org