CODEWITHSUNDEEP
reactjsreact-hooksui-patterns
Flo77
Flo77

Reputation: 5

Need help figuring out how to get my API data to render inside of my Tabs

I am in school working on a project where I have and API I am pulling from and have tabs UI Pattern I have my API data fetching and working and my Tab page setup and also rendering dummy data through each tab when i click it. I just can't figure out the next step on how to actually get the map method from my API to show up inside my the tabs as content.... down Below is my code for my app.js and my Tabs.js setup to make things easier here is a code Sandbox version Edit: https://codesandbox.io/s/stranger-things-project-c1znvo?file=/src/App.js

import Tabs from './Components/Tabs'
import React, { useState, useEffect } from 'react';
import './index'
import './App.css';




function App() {
    //API URL From Stranger things Quotes
      const URL = 'https://strangerthings-quotes.vercel.app/api/quotes/5';
      const [quotes, setQuotes] = useState([])
  
      //Fetching Data from API
    function getQuotes () {
      fetch(URL)
      
    .then(response => response.json())
    .then(data => setQuotes(data))
  }
  useEffect(getQuotes, []);
 console.log(quotes)
  
 //Getting data to populate on Page using .map 
 // Author would'nt pop up from array added my own little extra edit
 //rendering Tabs from Tab Component to main page(App.js)
 return(
  <main className="App">
  

    <h1 className='heading'>Stranger Things Quotes</h1>
  
  <div className='quotes'></div>
  {quotes.map((quotes, index) => (
    <li key={index}> {quotes.quote} Author: {quotes.author}</li>
  )
 )}
 <Tabs/>

  </main>

   );
}

export default App;




import { useState } from 'react';
import './Tabs.css'


//Creating Tabs for the UI and using state

function Tabs () {
 const [toggleState, setToggleState] = useState(1)

const toggleTab = (index) => {
    setToggleState(index);
}



    return(

<div className="container">
            
        <div className='nav-tabs'>

    <button className={toggleState === 1 ? "tabs active-tabs" : "tabs"}
        onClick={() => toggleTab(1)}>Tab 1</button>
   
    <button className={toggleState === 2 ? "tabs active-tabs" : "tabs"}
        onClick={() => toggleTab(2)}>Tab 2</button>
        
    <button className={toggleState === 3 ? "tabs active-tabs" : "tabs"}
        onClick={() => toggleTab(3)}>Tab 3</button>

    <button className={toggleState === 4 ? "tabs active-tabs" : "tabs"}
        onClick={() => toggleTab(4)}>Tab 4</button>
        </div>

    
        <div className="content-tabs">
            <div className={toggleState === 1 ? "content  active-content" : "content"} >
            <h2>Quotes set 1:</h2>
            <p> data array</p>
  
            </div>
            </div>

       
      <div  className={toggleState === 2 ? "content  active-content" : "content"}>
            <h2>Quotes set 2:</h2>
            <p>data array </p>
            </div>
            
        
        <div className={toggleState === 3 ? "content  active-content" : "content"}>
            <h2>Quotes set 3:</h2>
            <p>data array </p>
            </div>
            
        <div className={toggleState === 4 ? "content  active-content" : "content"} >
            <h2>Quotes set 4:</h2>
            <p>data array </p>
            </div>
        
        
        </div>
        
    );
}
export default Tabs;

Upvotes: 0

Views: 46

Answers (2)

Nisharg Shah
Nisharg Shah

Reputation: 19632

Thanks for the codesandbox.

You just need to pass the quotes from parent to child and where you need to simply loop your quotes over tabs and their content.

I used index + 1 as the tabKey and used same into your state.

Check: https://codesandbox.io/s/stranger-things-project-forked-3k74p1?file=/src/App.js

Note:

  1. for example, I used index as the key but always try to use the unique value as the key.
  2. I just see that you are in school, so please check the above suggestions and try them yourself, if you are still not getting an answer then look into the codesandbox

Upvotes: 0

JuBerrR
JuBerrR

Reputation: 46

since you are in school, i would not like to give you exact answer how to solve the issue, but will try to unblock you.

You should look how to pass data from one component to another using props. Once you figure that out, you should be able to map through quotes inside src/Components/Tabs similarly as you do in App.js.

Upvotes: 1

Related Questions