In no way can I change the status in one file from another, I tried to send <Smallblock terms='1212' /> , but it doesn't come to console.log(this.props)

Here is the code:

send:

 import React, {Component} from 'react'; import Smallblock from './Smallblock'; import '../css/sendpost.css'; class Sendpost extends Component { constructor(props) { super(props); this.state = { text: "" } this.handleTextChange = this.handleTextChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleSubmit(event) { event.preventDefault(); this.setState({text: ""}); <Smallblock terms='1212' /> } handleTextChange(event) { this.setState({text: event.target.value}); } render() { return ( <div className="form_input"> <form onSubmit={this.handleSubmit}> <input type='text' className="inputtext" placeholder="Что у вас нового?" value={this.state.text} onChange={this.handleTextChange} /> <button>Send</button> </form> </div> ); } } export default Sendpost;

Smallblock:

 import React, {Component} from 'react'; import '../css/smallblock.css'; class Smallblock extends Component { constructor(props) { super(props); console.log(this.props); alert(this.props); this.state = { count: "1" } } render() { return ( <div className="smallblock"> <div className="count">{this.state.count}</div> <div className="text">Записей</div> </div> ); } } export default Smallblock;

    1 answer 1

    So nothing will come as there are several errors.

    1. It is necessary {this.props.terms} because such a property is in the component (this is not quite an error)

      <Smallblock terms='1212' />

    2. The component inside the function will not be working, it must be returned and used as a JSX component. I wrote it after the form in the Sendpost component

    Full working code.

    Reference to codesandbox

    Sendpost

     class Sendpost extends Component { constructor(props) { super(props); this.state = { text: "" } this.handleTextChange = this.handleTextChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleSubmit(event) { event.preventDefault(); this.setState({text: ""}); } handleTextChange(event) { this.setState({text: event.target.value}); } render() { return ( <div className="form_input"> <form onSubmit={this.handleSubmit}> <input type='text' className="inputtext" placeholder="Что у вас нового?" value={this.state.text} onChange={this.handleTextChange} /> <button>Send</button> </form> <Smallblock terms='1212' /> </div> ); } } export default Sendpost;

    Smallblock

     class Smallblock extends Component { constructor(props) { super(props); console.log(this.props.terms); this.state = { count: "1" } } render() { return ( <div className="smallblock"> <div className="count">{this.state.count}</div> <div className="text">Записей</div> </div> ); } }