Next button in react

I’m currently stuck for several hours creating a simple thing in React. So I’m creating a movie quiz, when you need to guess a title based on given emojis. I thought about implementing an onclick function on the “Next” button and just shifting the movies array but it doesn’t work and I can’t find the answer anywhere. I would be grateful for any help. Here’s my code;

//this is the main file
import './App.css';
import { movies } from './movies.js';
import { nextMovie } from './nextmovie.js';

function App() {

  return (
    <div className="App">
      <header className="App-header">
        <h1 className="title">Guess the movie!</h1>
      <div className="result">
        <input type="text" className="answerField"></input>
        <button type="button" className="checkAnswer">Check</button>
      <div className="bottomButtons">
        <button type="button" className="hintButton">hint</button>
        <button type="button" className="nextButton" onClick={nextMovie}>Next</button>

export default App;
//movies file
import data from './unicode-emoji-json/data-by-group.json';

var titanic = [
    data['Travel & Places'][118].emoji, ' ',
    data['Objects'][68].emoji, ' ',
    data['Smileys & Emotion'][118].emoji, ' ',
    data['Travel & Places'][208].emoji, ' ',
    data['Smileys & Emotion'][54].emoji, ' ',
    data['Smileys & Emotion'][127].emoji, ' ',

var pulpFiction = [
    data['Objects'][215].emoji, ' ',
    data['People & Body'][244].emoji, ' ',
    data['People & Body'][245].emoji, ' ',
    data['Food & Drink'][47].emoji, ' ',

export const movies = [titanic, pulpFiction];
//and function file
import { movies } from './movies.js'

export let nextMovie = () => {

I’m a little confused by the code you have posted. But you should put the data in the state so React knows to “react to” any changes to the state.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.