Skip to main content

ReactJS REST CALL Example : Populate a list Search box enter key press.


This demo shows,
1. Updating a list within the react component
2. Updating a list in child react component by passing 'state' as 'props'
3. Updating simple 'props'
4. All the updates are on 'Enter Key' press on an input field.




//demo.js

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import ListSubheader from "@material-ui/core/ListSubheader";
import TextField from "@material-ui/core/TextField";

const styles = theme => ({
  root: {
    width: "100%",
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper,
    position: "relative",
    overflow: "auto",
    maxHeight: 300
  },
  listSection: {
    backgroundColor: "inherit"
  },
  ul: {
    backgroundColor: "inherit",
    padding: 0
  }
});

class RestTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchkey: "Jurassic",
      movies: [],
      keye: "yyy",
      mo: [
        {
          Title: "Jurassic World",
          Type: "movie",
          Year: "2015",
          imdbID: "tt0369610"
        },
        {
          Title: "Jurassic World11",
          Type: "movie",
          Year: "2015",
          imdbID: "tt03696101"
        }
      ]
    };
  }

  handleChange = searchkey => event => {
    if (event.key === "Enter") { 
      event.currentTarget.style.backgroundColor = "#cfffff";
      this.setState({
        [searchkey]: event.target.value
      }); 
      console.log("enter press here! "); 
      this.callRest(event.target.value);
      // console.log(" movies   here! ", this.state.movies);
    } 
  };

  // componentDidMount() {
  callRest(searchkey) {
    console.log(" searchkey   here! ", searchkey);
    const axios = require("axios");
    // Is there a React-y way to avoid rebinding `this`? fat arrow?
    const th = this;
    const url = `https://www.omdbapi.com/?s=${searchkey}&apikey=1149d830`;
    axios
      .get(url)
      .then(response => {
        // handle success
        this.setState({
          movies: response.data.Search,
          keye: "hihi"
        });
        console.log("res...", this.state.movies);
      })
      .catch(function(error) {
        // handle error
        console.log(error);
      })
      .then(function() {
        // always executed
        return false
      });
  }

  componentWillUnmount() {
    // this.serverRequest.abort();
  }
  render() {
    const { classes } = this.props; 
    return (
      <div>
        <TextField
          id="searchkey"
          label="search keyword"
          className={classes.textField}
          defaultValue="Jurassic"
          onKeyPress={this.handleChange("searchkey")}
          margin="normal"
        />
        {this.state.mo.map(movie => (
          <p key={movie.imdbID}>Title : {movie.Title} </p>
        ))}

        <PinnedSubheaderList
          classes={this.props.classes}
          keye={this.state.keye}
          movies={this.state.movies}
          {...this.state}
        />
      </div>
    );
  }
}

function PinnedSubheaderList(props) {
  const { classes } = props;

  if (props.movies){
  return (
    <div>
      <h1>{props.keye}</h1>

      { props.movies.map(movie => (
        <p key={movie.imdbID}>Title : {movie.Title}</p>
      ))}
    </div>
  );
  }else { return (<h1>{`No data found`}</h1>)}
}

export default withStyles(styles)(RestTest);




//index.js

import React from 'react';
import { render } from 'react-dom';
import Demo from './demo';

const rootElement = document.querySelector('#root');
if (rootElement) {
  render(<Demo />, rootElement);
}
      
      
//index.html

<body>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <div id="root"></div>
</body>
Labels:

Comments

Post a Comment

Popular posts from this blog

LLM on Mobile Phone : Mini Universal data and assistant running on an android smart phone Galaxy S23

  Imagine a world where everyone has access to a mini #OpenAI's #ChatGPT on their mobile phone, answering any question on any topic, right from their local phone memory. No need for internet. This is the future of #LLMs on mobile devices, and it's happening now. #MLC-AI has created a way to install a 3 billion parameter #RedPajam #LLMModel on a #Galaxy #S23 smartphone. This is a powerful #LLM that can generate text, translate languages, write different kinds of creative content, and answer your questions in an informative way. And it's all available on your phone, without the need for an internet connection. This could have a profound impact on people all over the world. Millions of suburban students who don't have access to the internet could now have access to a universal data source that can answer most of their questions. Refugee camps around the world could also benefit from this technology, giving refugees access to information and resources that they might not ot...
Post a Comment
Read more

Agentic AI growth could make GenAI providers to charge $1000-$2000 per month - #Cathywood , here is how.

      #Cathywood predicts that as the #agenticgenai grows the #GenAI service providers like openai, gemini, Copilot, etc will be able to charge $1000 - $2000 per month to their business customers. And she adds, "this is going to happen". Why this is important: Remember #Cathywood made a monster call in 2018, predicting that Tesla would hit $4,000 in five years. And eventually Tesla hit Wood's price target, with shares closing at $816, or $4,080 on a split adjusted basis (Jan. 2021). How this could happen: #AgenticGenAi means , 1. Integrating a business service with GenAI providers like Gemini/ChatGPT as an agent and make available in the chat interface. 2. Less human interaction and more calls to the GENAI Models. Nothing totally new, its similar to 'Ok google play a song from spotify' 'Alexa, order 8 pack dove on amazon' For example, when booking a flight, instead of navigating a complex travel website, users can simply provide a text prompt...
Post a Comment
Read more

Javascript 3 dimentional matrix html board onclick empty current box

javascript 3 dimentional matrix html board onclick empty current box  Algorithm! Rules: 1. Only immediate Box can be swapped. Should not jump another box 2. Only directions allowed: Left, Right, Up, Down. 3. Should not swap diagonally.   See the Pen 3d matrix map numbers. by PV ( @moorthi07 ) on CodePen .   function hasClass(elem, className) {   return elem.className.split(" ").indexOf(className) > -1; } function addClick() {   var btn = '<button class="btn1">kkkkk</button>';   document.getElementById("container").innerHTML += btn; } // function boxbodyClick(obj) { //   /* console.log(';;;',obj.className) */ //   /* alert(obj) */ // } var arr = [3]; for (var i = 0; i < 3; i++) {   arr[i] = new Array(3); } var emti = 0; var emtj = 0; function btnClick(obj, i, j) {   if (arr[i][j] !== "-") {            if (j + 1 == emtj || j == emtj || j - 1 == emtj)...
Post a Comment
Read more