score:0

class Todo extends Component {

    constructor(props) {
        super(props);

        this.state = {
            recievedData: [{
                id: 2,
                editable: false,
                value: 'x'
            }, {
                id: 3,
                editable: true,
                value: 'm'
            }],
            givenData: [{
                id: 3,
                value: 'r'
            }]
        };

        this.renderItem = this.renderItem.bind(this);
    }

    renderItem(data, index) {
        const name = `item_${index}`;
        const matchingData = this.state.givenData.find(item => item.id === data.id);

        const readOnly = !data.editable;

        if (matchingData) {
            return <input name={name} type="text" readOnly={readOnly} defaultValue={matchingData.value}/>
        } else {
            return <input name={name} type="text" readOnly={readOnly} defaultValue={data.value}/>
        }
    }

    render() {

        return (
            <div>
                <form>
                    {Object.keys(this.state.recievedData).map((selec, index) => {
                        // Here how do I need to compare the values from givenData to check the match?
                        return this.renderItem(selec, index);
                    })}
                </form>
            </div>
        );
    }
}

Related Query

More Query from same tag