Adjacent JSX elements must be wrapped in an enclosing tag

[ichicoding]

I'm getting this error at the end of Chapter 2 in App.js on <input placeholder="start"... and <button onClick... How do I fix this?

//Add input fields to the UI for user input

 <input
   onChange={e => updateInputValues('limit', e.target.value)}
   placeholder="limit"
 />
 <input
   placeholder="start"
   onChange={e => updateInputValues('start', e.target.value)}
 />


 //add button to the UI to give user the option to call the api
 <button onClick={fetchCoins}>Fetch Coins</button>

[ichicoding]

full App.js code

//Import useState and useEffect hooks from React
import React, { useState, useEffect } from 'react'

//import the API category from AWS amplify
import { API } from 'aws-amplify'

import './App.css';

function App() {
    //Create additional state to hold user input for limit and start properties
    const [input, updateInput] = useState({ limit: 5, start: 0 })

    //Create a new function to allow users to update the input values
    function updateInputValues(type, value) {
      updateInput({ ...input, [type]: value })
    }

    //update fetchCoins function to use limit and start properties
    async function fetchCoins() {
      const { limit, start } = input
      const data = await API.get('cryptoapi', '/coins?limit=${limit}&start=${start}')
        updateCoins(data.coins)
    }

    //Add input fields to the UI for user input
    <input
      onChange={e => updateInputValues('limit', e.target.value)}
      placeholder="limit"
    />
    <input
      placeholder="start"
      onChange={e => updateInputValues('start', e.target.value)}
    />

    //add button to the UI to give user the option to call the api
    <button onClick={fetchCoins}>Fetch Coins</button>

    return (
      <div className="App">
        {
          coins.map((coin, index) => (
            <div key={index}>
              <h2>{coin.name} - {coin.symbol}</h2>
              <h5>${coin.price_usd}</h5>
            </div>
          ))
        }
      </div>
    );
}

export default App

[fitzsimonsdevin]

hopefully you've solved this by now. however,

import React, { useState, useEffect } from 'react'

//import the API category from AWS amplify
import { API } from 'aws-amplify'

import './App.css';

function App() {
    //Create additional state to hold user input for limit and start properties
    const [input, updateInput] = useState({ limit: 5, start: 0 })

    //Create a new function to allow users to update the input values
    function updateInputValues(type, value) {
      updateInput({ ...input, [type]: value })
    }

    //update fetchCoins function to use limit and start properties
    async function fetchCoins() {
      const { limit, start } = input
      const data = await API.get('cryptoapi', '/coins?limit=${limit}&start=${start}')
        updateCoins(data.coins)
    }

    return (
      <div className="App">

    //Add input fields to the UI for user input
    <input
      onChange={e => updateInputValues('limit', e.target.value)}
      placeholder="limit"
    />
    <input
      placeholder="start"
      onChange={e => updateInputValues('start', e.target.value)}
    />

    //add button to the UI to give user the option to call the api
    <button onClick={fetchCoins}>Fetch Coins</button>
        {
          coins.map((coin, index) => (
            <div key={index}>
              <h2>{coin.name} - {coin.symbol}</h2>
              <h5>${coin.price_usd}</h5>
            </div>
          ))
        }
      </div>
    );
}

export default App

[ssjokelife]

src/App.js

import React, { useState } from 'react'

//import the API category from AWS amplify
import { API } from 'aws-amplify'

import './App.css';

function App() {
    //Create additional state to hold user input for limit and start properties
    const [coins, updateCoins] = useState([])
    const [input, updateInput] = useState({ limit: 5, start: 0 })

    //Create a new function to allow users to update the input values
    function updateInputValues(type, value) {
      updateInput({ ...input, [type]: value })
    }

    //update fetchCoins function to use limit and start properties
    async function fetchCoins() {
      const { limit, start } = input
      const data = await API.get('cryptoapi', `/coins?limit=${limit}&start=${start}`)
        updateCoins(data.coins)
    }

    return (
      <div className="App">

    <input
      onChange={e => updateInputValues('limit', e.target.value)}
      placeholder="limit"
    />
    <input
      placeholder="start"
      onChange={e => updateInputValues('start', e.target.value)}
    />

    <button onClick={fetchCoins}>Fetch Coins</button>
        {
          coins.map((coin, index) => (
            <div key={index}>
              <h2>{coin.name} - {coin.symbol}</h2>
              <h5>${coin.price_usd}</h5>
            </div>
          ))
        }
      </div>
    );
}

export default App

axios: unexpected end of file error => amplify/backend/function/cryptofunction/src/package.json axios version downgrade

{
  "name": "cryptofunction",
  "version": "1.0.0",
  "description": "Lambda function generated by Amplify",
  "main": "index.js",
  "license": "Apache-2.0",
  "dependencies": {
    "aws-serverless-express": "^3.3.5",
    "axios": "^1.2.0",
    "body-parser": "^1.17.1",
    "express": "^4.15.2"
  },
  "devDependencies": {
    "@types/aws-lambda": "^8.10.92"
  }
}