Next button in react

[halina.syposz]

Hi,
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>
      </header>
      <div className="result">
        <p>{movies[0]}</p>
      </div>
      <div>
        
      </div>
      <div>
        <input type="text" className="answerField"></input>
      </div>
      <div>
        <button type="button" className="checkAnswer">Check</button>
      </div>
      <div className="bottomButtons">
        <button type="button" className="hintButton">hint</button>
        <button type="button" className="nextButton" onClick={nextMovie}>Next</button>
      </div>
    </div>
  );
}

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 = () => {
  movies.shift();
}

[lasjorg]

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.