Gecko [ gandhischool.edu.np ]

Name	Size	Permission
Alert.tsx	2.75 KB	-rw-r--r--
DynamicInput.tsx	5.14 KB	-rw-r--r--
Image.tsx	542 B	-rw-r--r--
Pagination.tsx	3.49 KB	-rw-r--r--
index.tsx	86 B	-rw-r--r--
style.css	3.11 KB	-rw-r--r--

Code Editor : DynamicInput.tsx

// src/components/DynamicInput.js
import * as React from 'react';
export interface IFormProps {
    data: any;
    inputName: string;
    inputLabel: string;
    inputName1: string;
    inputLabel1: string;
    handleRemove: any;
    handleAdd: any;
    textType: string;
    textType1: string;
    labelList?: any;
}
export interface IFormState {}

class DynamicInput extends React.Component<IFormProps, IFormState> {
    constructor(props: any) {
        super(props);
        this.state = {};
    }

public handleRemove = (idx, state) => () => {
        this.props.handleRemove(idx, state);
    };

public handleAdd = name => () => {
        this.props.handleAdd(name);
    };

public render() {
        const {
            data,
            inputName,
            inputLabel,
            textType,
            inputName1,
            inputLabel1,
            textType1,
        } = this.props;
        return data.map((val, idx) => {
            let nameId = `${inputName}-${idx}`,
                labelId = `${inputName1}-${idx}`;
            return (
                <div key={idx}>
                    <div className="row">
                        <div className="col-md-5">
                            <label>{`${inputLabel} ${idx + 1}`}</label>
                        </div>
                        {data[idx].name != '' && (
                            <div className="col-md-7">
                                <label>{`${inputLabel1} ${idx + 1}`}</label>
                            </div>
                        )}
                    </div>
                    <div className="row align-items-center">
                        {data[idx].name == '' ? (
                            <div className="col-md-10">
                                <div className="form-group">
                                    <input
                                        type={textType}
                                        name={nameId}
                                        data-id={idx}
                                        id={nameId}
                                        defaultValue={data[idx].name}
                                        className="form-control"
                                        data-class="name"
                                        placeholder={`${inputLabel} ${idx + 1}`}
                                    />
                                </div>
                            </div>
                        ) : (
                            <div className="col-md-5">
                                <div className="form-group">
                                    <input
                                        type={textType}
                                        name={nameId}
                                        data-id={idx}
                                        id={nameId}
                                        defaultValue={data[idx].name}
                                        className="form-control"
                                        data-class="name"
                                        placeholder={`${inputLabel} ${idx + 1}`}
                                    />
                                </div>
                            </div>
                        )}
                        {data[idx].name != '' && (
                            <div className="col-md-5">
                                <div className="form-group">
                                    <input
                                        type={textType1}
                                        name={labelId}
                                        data-id={idx}
                                        id={labelId}
                                        defaultValue={data[idx].label}
                                        placeholder={`${inputLabel1} ${idx +
                                            1}`}
                                        data-class="label"
                                        className="form-control"
                                    />
                                </div>
                            </div>
                        )}
                        <div className="col-md-2">
                            <div className="form-group text-right">
                                <a
                                    href="#"
                                    className="eclipse-btn mr-2"
                                    title="Add"
                                    onClick={this.handleAdd(inputName)}
                                >
                                    <i className="fa fa-plus"></i>
                                </a>
                                <a
                                    href="#"
                                    className="eclipse-btn"
                                    title="Add"
                                    onClick={this.handleRemove(idx, inputName)}
                                >
                                    <i className="fa fa-minus"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            );
        });
    }
}
export default DynamicInput;

${this.title}

Code Editor : DynamicInput.tsx