ReactJS Error input is a void element tag and must neither have `children` nor use `dangerouslySetIn-CodePudding

I have a super simple React page connecting to NodeJS endpoints. I'm getting this error "Uncaught Error: input is a void element tag and must neither have children nor use dangerouslySetInnerHTML."

I have tried multiple solutions posted in SOF(put a label outside the input tag, use self close input tags, etc.) and all around but nothing helped.

EmailFaxDetails.js

import React, { useState } from 'react'
import FetchOrderDetails from './FetchOrderDetails';
import '../App.css';

const EmailFaxDetails = () => {

    const [message, setMessage] = useState('');
    const [isShown, setIsShown] = useState(false);

  const handleChange = event => {
    setMessage(event.target.value);
    console.log(event.target.value);
  };

  const handleClick = event => {
    event.preventDefault();
    setIsShown(true);
    console.log(message);
    
  }

    return(
        <div>
            <br></br>
            <br></br>
            Order Number: <input placeholder="Order Number" type="text" id="message" name="message" onChange={handleChange} value={message} autoComplete="off" />

            <button onClick={handleClick}>Search</button>
            
            {isShown && <FetchOrderDetails ord_no={message}/>}
            
        </div>
    )
}

export default EmailFaxDetails;

FetchOrderDetails.js

import React, { useEffect, useState } from 'react'
import axios from 'axios'
import '../App.css';

const FetchOrderDetails = ({ord_no}) => {
    const [data, setData] = useState([]);

    const url = `http://localhost:5000/api/customerOrder/${ord_no}`
      useEffect(() => {
        axios.get(url)
        .then(response => {
          console.log(response.data)
          setData(response.data)
        })
        .catch((err) => console.log(err));
      }, [url]);

    if(data) {
        return(
            <div>
                {data.map((order) => (
                    <div key={order.ID}>
                      <br></br>
                      <br></br>
                      Sales Ack Email: <input placeholder="Sales Ack Email" id="salesAck">{order.cmt[0]}</input>
                      <br></br>
                      Invoice Email: <input placeholder="Invoice Email" id="salesInv">{order.cmt[1]}</input>
                      <br></br>
                      <br></br>
                      <div>
                        <button>Update</button>
                      </div> 
                    </div>
                ))}
          </div>
        )
    }
    return (
        <h1>Something went wrong, please contact IT!</h1>
    )
}

export default FetchOrderDetails;

App.js

import React from 'react';
import EmailFaxDetails from './components/EmailFaxDetails';
import './App.css';


function App() {

  return (
    <>
    <EmailFaxDetails />
    </>
  );
}

export default App;

CodePudding user response：

In the FetchOrderDetails.js

Sales Ack Email: <input placeholder="Sales Ack Email" id="salesAck">{order.cmt[0]}</input>
<br></br>
Invoice Email: <input placeholder="Invoice Email" id="salesInv">{order.cmt[1]}</input>

input element is a self-closing tag and can't contain children elements or text.

If you want to add a default value for the input you can add defaultValue property.

Sales Ack Email: <input defaultValue={order.cmt[0]} placeholder="Sales Ack Email" id="salesAck" />
<br></br>
Invoice Email: <input defaultValue={order.cmt[1]} placeholder="Invoice Email" id="salesInv" />

Or add a value property and onChange event to update the value.