How pass image as props in React?

Question

How pass image as props? src={}

inside src not intercept as props

In Card.js I have two type props. either type props originate from data.js objects properties(image) and other type I add separately(text,switch).

(I public this without css.)

data.js database Component

import React, { Component } from 'react';

const data = {
    "properties": [
    {
        "_id": "fsdfsd23r42133er12",
        "index": 0,
        "image":"WebPage1",     
    },
    {
        "_id": "fsdfsd23r42133er13",
        "index": 1,
        "image":"WebShop1", 
    },
    {
        "_id": "fsdfsd23r42133er14"
        "index": 2,
        "kep":"Development1", 
    },
  
    ]
}

export default data;

Slider.js Parent component

import React, { Component } from 'react';
import data from '../../data/data';
import Card  from './Card';
import ArrowRight from '../../assets/Card/ArrowRight.PNG';
import ArrowLeft from '../../assets/Card/ArrowLeft.PNG';
import Webpage1 from '../../assets/Ajanlas/Jo/WebPage500.jpeg'
import WebShop1 from '../../assets/Ajanlas/Jo/WebShop500.jpeg';
import Development1 from '../../assets/Ajanlas/Jo/Development500.jpeg';

class Slider extends Component {
  constructor(props){
    super(props);
    this.state = {
    properties: data.properties,
    property: data.properties[0],
    switch:false,
    }
  }
  
    nextProperty = () => {
    const newIndex = this.state.property.index+1;
    this.setState({
      property: data.properties[newIndex],     
    })
    }
    
    prevProperty = () => {
    const newIndex = this.state.property.index-1;
    this.setState({
      property: data.properties[newIndex],     
    })
  }

  render() {

    const {properties, property} = this.state;
    return (    
      <div>
            <button 
              onClick={() => this.prevProperty()} 
            </button>
            
            <button 
              onClick={() => this.nextProperty()}     
           </button>           
       </div>

      <div>   
               <div>                
                 {properties.map(property => <Card  key={property._id} property={property}
                 image={image}
                 text="Some text"
                 switch={this.state.switch}
                 }
               </div>     
      </div>
     
    );
  }
}

export default Slider;

Card.js Child Component

import React from 'react';
import PropTypes from 'prop-types';
import Webpage1 from '../../assets/Ajanlas/Jo/WebPage500.jpeg'
import WebShop1 from '../../assets/Ajanlas/Jo/WebShop500.jpeg';
import Development1 from '../../assets/Ajanlas/Jo/Development500.jpeg';

const Card = ({property, text, switch}) => {
    const {index, image} = property;

    return (
              <div>
                   {text}  
                   {switch}
                   <img src={image} alt='WebPage'/>  
               </div>                  
    )
}

Card.propTypes = {
    property: PropTypes.object.isRequired,
    switch: PropTypes.string.isRequired,
    image: PropTypes.string.isRequired,
}

export default Card;

Answer 1

The key part:

  <img src={require(`../../assets/${data[counter].image}.jpg`)} />

Answer 2

I find the correct answer with react hooks

App.js

import React, { useState} from "react";
import './App.css';
import Form from "../src/components/Form/Form";
import List from "../src/components/List/List"

function App() {
const [image,setImage] = useState("");

const addIMageHandler = (image) =>{
setImage((prevImage)=>{
  
  return image
})
}

  return (
    <div className="App">
     <Form myimagehandler={addIMageHandler}/>
     <List myimage={image}/>
    </div>
  );
}

export default App;

Form.js

import React, { useState, Fragment } from "react";

const Form = (props) => {
  const [selectimage, setSelectimage] = useState();

  const imageChangeHandler = (event) => {
    setSelectimage(event.target.value);
  };

  const addCarHandler = (event) => {
    event.preventDefault();
    props.myimagehandler(selectimage);
  };

  return (
    <form onSubmit={addCarHandler}>
      <label htmlFor="car">Choose Car</label>
      <select
        id="car"
        type="text"
        value={selectimage}
        onChange={imageChangeHandler}
      >
        <option type="text" value="BMW">
          BMW
        </option>
        <option type="text" value="Audi">
          Audi
        </option>
      </select>
      <button type="submit">Choose Car</button>
    </form>
  );
};

export default Form;

List.js

import React from "react";
import myaudi from "../../assets/image/audi.PNG";
import mybmv from "../../assets/image/bmw.PNG";

const List = (props) => {
 
  console.log(props.myimage)
  return (
    <div>
      <h1>{props.myimage}</h1>
      
      {props.myimage === "Audi" && <img src={myaudi} />}
      {props.myimage === "BMW" && <img src={mybmv} />}
    </div>
  );
};

export default List;

Answer 3

It perhaps not the most elegant solution but it is one solution:

Slider.js

import React, { useState } from "react";
import Data from "../utils/data";
import Card from "../Card/Card";
import "./Slider.css";

const Slider = () => {
  const [cardIndex, setcardIndex] = useState(0);

  const nextProperty = () => {
    setcardIndex((cardIndex) => {
      return cardIndex + 1;
    });
  };

  const prevProperty = () => {
    setcardIndex((cardIndex) => {
      return cardIndex - 1;
    });
  };

  return (
    <div>
      <h1>Slider</h1>
      <div className="outer-slider">
        <button onClick={prevProperty}>Prev</button>
        {console.log(Data.index)}
        <Card
          id={Data[cardIndex]._id}
          index={Data[cardIndex].index}
          image={Data[cardIndex].image}
        />
        <button onClick={nextProperty}>Next</button>
      </div>
    </div>
  );
};

export default Slider;

data.js

const data = [
  
    {
        "_id": "fsdfsd23r42133er12",
        "index": 0,
        "image":"../../image/R.png",     
    },
    {
        "_id": "fsdfsd23r42133er13",
        "index": 1,
        "image":"../../image/S.png", 
    },
    {
        "_id": "fsdfsd23r42133er14",
        "index": 2,
        "image":"../../image/T.png", 
    },
    {
        "_id": "fsdfsd23r42133er15",
        "index": 3,
        "image":"../../image/U.png", 
    },
    {
        "_id": "fsdfsd23r42133er16",
        "index": 4,
        "image":"../../image/V.png", 
    },
    {
        "_id": "fsdfsd23r42133er17",
        "index": 5,
        "image":"../../image/Z.png", 
    }
  
    ]

card.js

import React from "react";
import "./Card.css";

const Card = (props) => {
  return (
    <div className="card-outer">
      <h1>This is one card</h1>

      <ul>
        <li>Id: {props.id}</li>
        <li>Index: {props.index}</li>
        <li>Image: {props.image}</li>
      </ul>
      <img src={props.image}></img>
    </div>
  );
};

export default Card;