dsc712

import React, { Component } from "react";
import { connect } from "react-redux";
class App extends Component {
  render() {
    return (
      <>
        <h1>age {this.props.age}</h1>
        <button onClick={this.props.onAgeUp}>increment age</button>
        <button onClick={this.props.onAgeDown}>decrement age</button>
      </>

dsc712

import React, { Component } from "react";
import withCounter from "../HOC/withCounter";
class MyButton extends Component {
  state = {};
  render() {
    return (
      <>
        <button onClick={this.props.incrementCount}>
          click me {this.props.count}
        </button>

dsc712

#include <bits/stdc++.h>
using namespace std;

void swapSwap( int a[], int k, int n ) {
	for( int i = 0; (i < n - 1) && (k > 0) ; i++ ) {
		int currMax = i;

		for( int j = i+1; j < n; j++ ) {
			if (k < j - i) 
                break; 

dsc712

#include <bits/stdc++.h>
using namespace std;

int getMax(int L, int R) {
	int LxR = L ^ R;
	int p = 0;

	// msb of L ^ R
	while(LxR) {
		p++;

dsc712

import React, { Component } from 'react';
import { Icon } from "antd";

class VideoDetail extends Component {
    state = {
        video: null
    };

    componentDidUpdate(prevProps) {
        if( this.props.video && ( prevProps.video !== this.props.video)  ) {

dsc712

import React, { Component } from 'react';

class VideoListItem extends Component {
    render() {
        const video = this.props.video;
        const imageUrl = video.snippet.thumbnails.default.url;
        return (
          <li onClick={ () => this.props.onUserSelected() } style={{ "border": "1px solid #efefef", "marginBottom": "3px", "borderRadius": "5px"}}>
              <div>
                  <img src={ imageUrl } alt={ video.snippet.title }/>

dsc712

import React, { Component } from 'react';
import VideoListItem from './VideoListItem';
import { List } from 'antd';

class VideoList extends Component {
    state = {
        data: []
    };

    render() {

dsc712

import React, { Component } from 'react';
import  { AutoComplete, Button, Icon } from 'antd';
const Option = AutoComplete.Option;
class SearchBar extends Component {

    state = {
      videos: []
    };

    componentDidUpdate( prevProps ) {

dsc712

import React, { Component } from 'react';
import SearchBar from './Components/SearchBar';
import VideoList from './Components/VideoList';
import VideoDetail from './Components/VideoDetail';
import YTSearch from 'youtube-api-search';
import './App.css';
import { Icon, notification } from 'antd';
import dotenv from 'dotenv';
dotenv.config();

dsc712

ajax using xhr

A Pen by Devyendu Shekhar Choudhary on CodePen.

License.