'props' is not defined no-undef. What am I doing wrong?

Question

React

Hello everyone)
Tell me plz.
There is an input in which I enter the text, I press send and I want this text to be added to the page.
As a result, I get 'props' is not defined in Dialogs props.sendMessage(values.newMessageBody);

Dialogs

import React from 'react';
import classes from './Dialogs.module.css';
import DialogItem from "./DialogItem/DialogItem";
import Message from "./Message/Message";
import {Redirect} from "react-router-dom";
import {Field, Form, Formik} from 'formik';

const Dialogs = (props) => {
    let state = props.dialogsPage;

    let dialogsElements = state.dialogs
        .map(el => <DialogItem name={el.name} key={el.id} id={el.id} avatar={el.avatar}/>);
    let messagesElements = state.messages
        .map(el => <Message message={el.message} key={el.id}/>);


    if (!props.isAuth) return <Redirect to={"/login"}/>;

    return (
        <div className={classes.dialogs}>
            <div className={classes.dialogsItems}>
                {dialogsElements}
            </div>
            <div className={classes.messages}>
                <div>{messagesElements}</div>
            </div>
            <AddMessageForm />
        </div>
    )
}

const initialValues = {
    newMessageBody: ''
}
const onSubmit = values => {
    props.sendMessage(values.newMessageBody);
    console.log('запись', values)
}

const AddMessageForm = (props) => {
    return (
        <Formik initialValues={initialValues} onSubmit={onSubmit}>
            <Form>
                <div>
                    <div>
                        <Field as='textarea'
                               id='newMessageBody'
                               name='newMessageBody'/>
                    </div>
                    <button type='submit'>Submit</button>
                </div>
            </Form>
        </Formik>
    )
}

export default Dialogs;

DialogsContainer

import React from 'react';
import {sendMessageCreator} from "../../Redux/dialogs-reducer";
import Dialogs from "./Dialogs";
import {connect} from "react-redux";
import {whithAuthRedirect} from "../../hoc/withAuthRedirect";
import {compose} from "redux";

let mapStateToProps = (state) => {
    return {
        dialogsPage: state.dialogsPage
    }
}

let mapDispatchToProps = (dispatch) => {
    return {
        sendMessage: (newMessageBody) => {
            dispatch(sendMessageCreator(newMessageBody));
        }
    }
}

export default compose(
    connect(mapStateToProps, mapDispatchToProps),
    whithAuthRedirect
)(Dialogs);

dialogs-reducer

import React from "react";
const SEND_MESSAGE = 'SEND_MESSAGE';

let initialState = {
    dialogs: [
        {
            id: 1,
            name: 'Dima',
            avatar: <img
                src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLSixP2XwCUD1IwO_OUHJ_l3skcKizRxG4rQ&usqp=CAU'
                alt=""/>
        }
    ],
    messages: [
        {id: 1, message: 'Hi'}
    ]
}

const dialogsReducer = (state = initialState, action) => {
    switch (action.type) {
        case SEND_MESSAGE:
            let body = action.newMessageBody;
            return {
                ...state,
                messages: [...state.messages, {id: 7, message: body}]
            };

        default:
            return state;
    }
}

export const sendMessageCreator = (newMessageBody) => ({type: SEND_MESSAGE, newMessageBody})


export default dialogsReducer;

Answer 1

in your Dialogs component, the sendMessage function is passed to props, you must throw it into the AddMessageForm component:

import React from 'react';
import classes from './Dialogs.module.css';
import DialogItem from "./DialogItem/DialogItem";
import Message from "./Message/Message";
import {Redirect} from "react-router-dom";
import {Field, Form, Formik} from 'formik';

const Dialogs = (props) => {
    let state = props.dialogsPage;

    let dialogsElements = state.dialogs
        .map(el => <DialogItem name={el.name} key={el.id} id={el.id} avatar={el.avatar}/>);
    let messagesElements = state.messages
        .map(el => <Message message={el.message} key={el.id}/>);


    if (!props.isAuth) return <Redirect to={"/login"}/>;

    return (
        <div className={classes.dialogs}>
            <div className={classes.dialogsItems}>
                {dialogsElements}
            </div>
            <div className={classes.messages}>
                <div>{messagesElements}</div>
            </div>
            <AddMessageForm sendMessage={props.sendMessage}/>
        </div>
    )
}



const AddMessageForm = (props) => {
const initialValues = {
    newMessageBody: ''
}
const onSubmit = values => {
    props.sendMessage(values.newMessageBody);
    console.log('запись', values)
}
    return (
        <Formik initialValues={initialValues} onSubmit={onSubmit}>
            <Form>
                <div>
                    <div>
                        <Field as='textarea'
                               id='newMessageBody'
                               name='newMessageBody'/>
                    </div>
                    <button type='submit'>Submit</button>
                </div>
            </Form>
        </Formik>
    )
}

export default Dialogs;