Почему не рендерится компонент?

Question

[AveWycc]

App.js

import React from 'react'
import MainWindow from './components/MainWindow'
import Field from './components/Field'
import FieldName from "./components/FieldName";

function App() {
  return (
    <div className="App">
      <MainWindow>
        <Field data='Check' type='text'></Field>
        <FieldName data='Check'></FieldName>
      </MainWindow>
    </div>
  );
}

export default App;

MainWindow.js

import React from 'react'

export default class MainWindow extends React.Component {
  render() {
    return <div className="mainWindow">

    </div>
  }
}

Field.js

import React from 'react'

export default class Field extends React.Component {
  render() {
    return <input type={this.props.type} className="field">{this.props.data}</input>
  }
}

FieldName.js

import React from 'react'

export default class FieldName extends React.Component {
  render() {
    return <p className='fieldName'>{this.props.data}</p>
  }
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Не рендерятся компоненты FieldName и Field в MainWindow

Answer 1

[0xD34F]

В MainWindow должно быть так:

<div className="mainWindow">
  {this.props.children}
</div>

Компонент Field - откуда вы взяли, что внутрь input можно что-то помещать? Это непарный тэг. Закрывающий тэг вырезать, добавить слеш в конец открывающего. Что дальше - вам виднее, всё зависит от того, как вы предполагаете использовать props.data. Обернуть всё в label, или сделать data значением input'а.

Comments

[AveWycc]

Спасибо, помогло.