How to pass image to this.state in reactJS

Question

I am trying to modify the Tic Tac Toe tutorial(https://codepen.io/gaearon/pen/ybbQJX?editors=0010).

Instead of null, I want to pass 9 different images and its title to the initial squares.

After clicking, the images will turn into different ones.

Tic Tac Toe: empty boxes ----> show X after the click

My version: images(old) & title ------> show different image(new) after the click(A1-old to A1-new, A2-old to A2-new)

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      squares: [
        { title: "A1", image: require('../img/A1-old.png') },
        { title: "A2", image: require('../img/A2-old.png') },
      ]
    };
  }

Then I am stuck at the first step, showing images..........

Answer 1

I don't think you are experiencing problems because of the way you are loading your image (I tried @Michael's answer and it did not load the images for me, while your code worked.)

Here is the minimal code I wrote to check your solution and it works perfectly on my end. Maybe try editing your post to add a bit more context to your question.

Answer 2

You should import images in the parent component and then pass them to child components like a component.

Try this:

import A1Old from '../img/A1-old.png'
import A2Old from '../img/A2-old.png'

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      squares: [
        { title: "A1", image: <A1Old /> },
        { title: "A2", image: <A2Old /> },
      ]
    };
  }
  ...