Mainform.js

import React, { useState, useEffect } from 'react';
import mydata from "./types_data.json"
import {
    Row, Col, Button, Form, FormGroup, InputGroupAddon, InputGroupText, InputGroup
    , Label, Input, FormText, ButtonGroup, Modal, ModalHeader, ModalBody, ModalFooter
} from 'reactstrap';
// import image from './imgs/anh1.png'
// import fomula from './imgs/ct.jpg'
const MainForm = (props) => {

    const [modal, setModal] = useState(false);


    const [ops, setOptions] = useState({
        op1: 'Càng loại 1'
    })
    const [imgs, setImage] = useState({ img: "c1_1.png" })

    const [val, setVal] = useState({

        "res": 0
    })


    const changeValue = (event) => {
        const target = event.target;
        const value = target.value;
        const name = target.name;

        setOptions(prevState => ({
            ...prevState,
            ["op1"]: value
        }))
        console.log(value);
    }

    const changeImage = (event) => {
        const target = event.target;
        const value = target.value;
        const name = target.name;

        setOptions(prevState => ({
            ...prevState,
            ["op1"]: value
        }))

        console.log(value);
        setImage(prevState => ({
            ...prevState,
            ["img"]: mydata[value]
        }))
    }
    const showTemplate = (event) =>{
        if(ops.op1.includes("1")){
            props.history.push("/cang1");
        } else{
            props.history.push("/cang2");
        }
    }

    return (
        <div>
            <Form style={{ border: "solid 1px", borderRadius: "10px", padding: "10px" }}>
                <Row>
                    {/* <Col xs="4">
                        <FormGroup>
                            <Label for="opt1">Chọn loại càng</Label>
                            <Input type="select" name="select" id="opt1" value={ops.op1} onChange={changeValue}>
                                {Object.keys(mydata).map((keyName, i) => (
                                    <option>{keyName}</option>
                                ))}
                            </Input>
                        </FormGroup>
                    </Col> */}
                    <Col xs="4">
                        <Label for="opt1"><center>Chọn loại càng</center></Label>
                        <br></br>
                        <ButtonGroup>
                            {Object.keys(mydata).map((img, i) => {
                                return <Button style={{ margin: "2px" }} onClick={changeImage} value={img}>{img}</Button>
                            })}
                        </ButtonGroup>
                    </Col>
                    <Col xs="4">
                        <Label for="opt1">Xem chi tiết</Label>
                        <br></br>
                        <ButtonGroup>
                            <Button style={{ margin: "2px" }} onClick={showTemplate}>Xem</Button>
                        </ButtonGroup>
                    </Col>
                </Row>
            </Form>
            <div style={{ borderRadius: "10px", background: "#979797", margin: "4px", height: '1000px', position: "relative", border: 'solid black 1px' }}>
                <img src={"/imgs/" + imgs.img} style={{
                    width: "40%", right: "50%", maxHeight: "100%", height: "auto",
                    position: "absolute", top: 0, bottom: 0, left: 0, right: 0, margin: "auto"
                }}>
                </img>
            </div>
        </div >
    );
}

export default MainForm;

types_data.json

{
    
        "Càng loại 1": "c1_1.png",
        "Càng loại 2": "c1_2.png",
        "Càng loại 3": "c1_3.png",
        "Càng loại 4": "c1_4.png",
        "Càng loại 5": "c1_5.png"
}