Reactjs Warning: Input Is a Void Element Tag and Must Not Have 'Children' or Use 'Props.Dangerouslysetinnerhtml'. Check the Render Method of Null

Warning: input is a void element tag and must not have `children` or use `props.dangerouslySetInnerHTML`. Check the render method of null

Warning: input is a void element tag and must not have children ...

A dom.input may not have child elements.

But this code is trying to render error messages as children of a dom.input:

  dom.td null,
    dom.input
      className: 'form-control'
      type: 'text'
      defaultValue: @props.admin.email
      ref: 'email'
      # These are being rendered as children of the input: 
      for errorText, index in @state.errorTexts
        React.createElement AdminError, key: index, errorText: errorText

Can you render those error messages somewhere else? For example, as siblings of the input:

  dom.td null,
    dom.input
      className: 'form-control'
      type: 'text'
      defaultValue: @props.admin.email
      ref: 'email'
    for errorText, index in @state.errorTexts
      React.createElement AdminError, key: index, errorText: errorText

ReactCompositeComponent.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object

render method cannot return multiple elements, it must return only one. So wrap the list in another DOM element:

render: ->
  dom.div null,
    for errorText in @props.errorTexts
      dom.div
        className: 'help-block'
        errorText

Unhandled Rejection (Error) when inserting a checkbox on React App

<input type="checkbox" 
   id={item.Name}>
   checked={item.gotIt}
</input>

Code upside has some wrong useage of input tag;
Do change like below;

<input type="checkbox" 
   id={item.Name}>
   checked={item.gotIt}
/>

or

<input type="checkbox" 
   id={item.Name}>
   checked={item.gotIt}
>
</input>

React.js: onChange event for contentEditable

Edit: See Sebastien Lorber's answer which fixes a bug in my implementation.

---

Use the onInput event, and optionally onBlur as a fallback. You might want to save the previous contents to prevent sending extra events.

I'd personally have this as my render function.

var handleChange = function(event){
    this.setState({html: event.target.value});
}.bind(this);

return (<ContentEditable html={this.state.html} onChange={handleChange} />);

jsbin

Which uses this simple wrapper around contentEditable.

var ContentEditable = React.createClass({
    render: function(){
        return <div 
            onInput={this.emitChange} 
            onBlur={this.emitChange}
            contentEditable
            dangerouslySetInnerHTML={{__html: this.props.html}}></div>;
    },
    shouldComponentUpdate: function(nextProps){
        return nextProps.html !== this.getDOMNode().innerHTML;
    },
    emitChange: function(){
        var html = this.getDOMNode().innerHTML;
        if (this.props.onChange && html !== this.lastHtml) {

            this.props.onChange({
                target: {
                    value: html
                }
            });
        }
        this.lastHtml = html;
    }
});

Reactjs displaying Uncaught Error when trying to display data

1. You are referencing a function, displayRecords that is not in the global scope of the page, it's defined inside of componentDidMount, which is not available to your HTML tag.
2. select tags are not valid inside of a label tag.
3. You are using both HTML and React, why?
4. You are binding this inside an unbound function, where this resolved to the root scope, which is why setState is not defined.
5. You are setting the inner HTML of a tag using jquery and not react ... why?
6. You are using dangerouslySetInnerHTML, you shouldn't be, there are better ways.
7. You are calling $(document).ready from within a React component ... the document is ready if the component has been mounted, this is un-needed logic.

Here is the direct fix for your issue:

<script src="build/react.min.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="build/browser.min.js"></script>
<script src="build/jquery.min.js"></script>


<a href="javascript:void(0);" class="links"  onclick="displayRecords('10', '1');" >Page</a>
<label> Rows Limit: 
<select name="show" onChange="changeDisplayRowCount(this.value);">
  <option value="10" >10</option>
  <option value="20" >20</option>
  <option value="30" >30</option>
</select>
</label>
<div id="root"></div>
<script type="text/babel">
window.displayRecords = function(){
    alert('Component not mounted yet.');
};

window.changeDisplayRowCount = function(){
    alert('Component not mounted yet.');
}
class NameForm extends React.Component {
  constructor() {
    super();
    this.state = {
      data: []
    };
  }
  componentDidMount() {
    window.displayRecords = (function displayRecords(numRecords, pageNum) {
      var show = numRecords;
      var pagenum = pageNum;

      alert(show);

      $.ajax({
        type: 'GET',
        url: 'getrecords.php',
        data: {
          show: numRecords,
          pagenum: pageNum
        },
        cache: false,
        success: function(data) {
          show: numRecords;
          pagenum: pagenum;

          $('#display')
            .html(data)
            .show();

          //console.log(email);

          console.log(show);
          console.log(pagenum);

          this.setState({data: data});
        }.bind(this),
        error: function(jqXHR) {
          console.log(jqXHR);
        }.bind(this)
      });
    }.bind(this) // end displayRecords

    window.changeDisplayRowCount = function changeDisplayRowCount(numRecords) {
      displayRecords(numRecords, 1);
    }

    $(document).ready(function() {
      displayRecords(10, 1);
    });
  }

  render() {
    return (
      <div>
        {this.state.data ? (
          <div dangerouslySetInnerHTML={{__html: this.state.data}} />
        ) : (
          <div>Loading...</div>
        )}
      </div>
    );
  }
}
ReactDOM.render(
  <NameForm />,
  document.getElementById('root')
);


</script>

While this will fix your issue (or so it probably should), here is what your code should look something like:

function PageLink({page,onClick}){
  return <div className="pageLink" onClick={onClick.bind(null,page)}>
    {page}
  </div>;
}

function RowSelector({selected,onChange}){
  return (
    <div className="rowSelector">
      <label>Rows Limit:</label>
      <select onChange={(e) => onChange(e.target.value)} value={selected}>
          {[10,20,30].map(num => <option key={num} value={num}>{num}</option>)}
      </select>
    </div>
  )
}

function DataItem({item}){
  // Assumes data is a map with a name key.
  return <div>{item.name}</div>;
}

class Pagination extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      currentPage: 0,
      rowLimit: 10,
      data: [],
      loading: false
    };
    this.setCurrentPage = this.setCurrentPage.bind(this);
    this.setRowLimit = this.setRowLimit.bind(this);
  }

  updateData(){
    this.setState({loading: true});
    // This is just for mock purposes, remove this and use the ajax logic below.
    setTimeout(() => {
      this.setState({
        loading: false,
        data: (function(rowLimit){
          let res = [];
          for(let i = 0; i < rowLimit; i++){
            res.push({name: String(i)});
          }
          return res;
        })(this.state.rowLimit)
      })
    },1000);
    return;
    $.ajax({
      type: 'GET',
      url: 'getrecords.php',
      data: {
        show: this.state.rowLimit,
        pagenum: this.state.currentPage
      },
      cache: false,
      success: data =>  this.setState({data,loading: false}),
      error: jqXHR => {
        this.setState({loading:false});
        console.log(jqXHR);
      }
    });
  }

  componentDidUpdate(prevProps,prevState){
    if(this.state.currentPage != prevState.currentPage || this.state.rowLimit != prevState.rowLimit){
      this.updateData();
    }
  }

  componentDidMount(){
    this.updateData();
  }

  setCurrentPage(currentPage){
    this.setState({currentPage});
  }

  setRowLimit(rowLimit){
    this.setState({rowLimit})
  }

  renderLoading(){
    return <div>Loading ...</div>;
  }

  renderData(){
    return <div>
      {this.state.data.map(
         (item,key) => <DataItem item={item} key={key}/>
      )}
    </div>
  }

    render(){
        return (
      <div>
        <PageLink page={1} onClick={this.setCurrentPage}/>
        <RowSelector onChange={this.setRowLimit} selected={this.rowLimit}/>
        {this.state.loading ? this.renderLoading() : this.renderData()}
      </div>
    );
    }
}

ReactDOM.render(
  <Pagination />,
  document.getElementById('react')
);

You can see this working here: https://codepen.io/anon/pen/qPoBjN

Not assignable to type IntrinsicAttributes & IntrinsicClassAttributes React.js

Digging into Typescript's checker.ts it works likely because the block where the assignment to intrinsicAttributes is made is not needed to be executed, since there are no explicit JsxAttributes to compare for that component's invocation (isComparingJsxAttributes may be false). Try debugging Typescript's source code if you really need to find out if this is the case.

Just take an Example that
Here typescript expects okay something is being passed only to be deconstructed when component will mount.

<MyComponent {...props} />

But here typescript takes this.state.action as undefined or maybe null because it is never sure there'll be a valid value passed.

<MyComponent action={this.state.action} />

Even if you have got the actions prop's type right. it still dosent know whether it has value or not hance see it as {} which is an empty object and cant be assigned to action.

---

Related Topics