Pass Props to the component to take the todoListId-CodePudding

I have this project and it is a Todo project and I want to create a task, and the API of the task we have to pass three elements to it, the first is "todoListId", the second is "title", and the third is "Content".

The problem is that I want to pass "todoListId" but I couldn't pass it, how can I do that?

Through this file I passed the values "Title" and "Content" to the "CreateCardAction" function, but I still have to pass the "TodolistId", and I must pass "TodolistId" from the component "singleList", since it is inside Component "SingleList" I called component "TaskModal"

TaskModal.tsx:

import { Grid, Typography } from "@material-ui/core";
import React from "react";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import NotesIcon from "@material-ui/icons/Notes";
import SubtitlesIcon from "@material-ui/icons/Subtitles";
import useStyle from "../../../../styles/task-modal-style";
import AddIcon from "@material-ui/icons/Add";
import { bindActionCreators } from "redux";
import { Actions } from "../../../../redux-store/actions/actions";
import { connect } from "react-redux";
import { Todo } from "../../../../redux-store/reducers/todo-card-reducer";

interface in_TaskModal {
  todoListId?: number;
  title: string;
  todos?: Todo[];
}

const TaskModal: React.FC<{
  // in_TaskModal: in_TaskModal;
  todoListId?: number;
  todocard?: Object;
  CreateCardAction: Function;
}> = ({ CreateCardAction, todocard }) => {
  console.log("todocard: ", todocard);
  const classes = useStyle();
  const [open, setOpen] = React.useState(false);

  const [title, setTitle] = React.useState("");
  const [content, setContent] = React.useState("");

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const handleSubmit = (e: { preventDefault: () => void }) => {
    alert(1);
    e.preventDefault();
    setOpen(false);
    alert(2);
    CreateCardAction(title, content);
    alert(3);
    console.log("title inside list modal: ", title);
  };

  return (
    <Grid>
      <Grid
        container
        direction="row"
        justifyContent="flex-start"
        alignItems="flex-end"
      >
        <Grid item>
          <Grid
            container
            direction="row"
            justifyContent="flex-start"
            alignItems="flex-end"
          >
            <Button
              onClick={handleClickOpen}
              className={classes.createTaskbutton}
              startIcon={<AddIcon style={{ fontSize: 17 }} />}
            >
              Create new task
            </Button>
          </Grid>
        </Grid>
      </Grid>
      <Grid
        container
        lg={12}
        xs={12}
        justifyContent="center"
        alignItems="center"
      >
        <Dialog
          classes={{ root: classes.root }}
          // className={classes.root}
          open={open}
          onClose={handleClose}
          aria-labelledby="form-dialog-title"
        >
          <Grid container direction="column">
            <Grid item>
              <Grid container direction="column">
                <Grid item>
                  <DialogTitle id="form-dialog-title">
                    <Grid container direction="column">
                      <Grid item>
                        <Grid container direction="row">
                          <Grid item>
                            <SubtitlesIcon className={classes.icon} />
                          </Grid>

                          <Grid item>
                            <Typography className={classes.text}>
                              Task Title
                            </Typography>
                          </Grid>
                        </Grid>
                      </Grid>
                      <Grid item>
                        <TextField
                          className={classes.titleField}
                          id="standard-basic"
                          value={title}
                          onChange={(e) => setTitle(e.target.value)}
                        />
                      </Grid>
                    </Grid>
                  </DialogTitle>
                </Grid>
                <Grid item>{/* llll */}</Grid>
              </Grid>
            </Grid>
            <Grid item>
              <DialogContent>
                <DialogContentText>
                  <Grid container direction="row">
                    <Grid item>
                      <NotesIcon className={classes.icon} />
                    </Grid>
                    <Grid item>
                      <Typography className={classes.text}>
                        Description
                      </Typography>
                    </Grid>
                  </Grid>
                </DialogContentText>
                <TextField
                  variant="outlined"
                  style={{ textAlign: "left" }}
                  multiline
                  rows={2}
                  className={classes.titleField}
                  value={content}
                  onChange={(e) => setContent(e.target.value)}
                />
              </DialogContent>
            </Grid>
            <Grid
              item
              container
              justifyContent="flex-start"
              alignItems="flex-end"
            >
              <DialogActions>
                <Button
                  variant="contained"
                  className={classes.button}
                  onClick={handleSubmit}
                >
                  Create Task
                </Button>
              </DialogActions>
            </Grid>
          </Grid>
        </Dialog>
      </Grid>
    </Grid>
  );
};

function mapDispatchToProps(dispatch: any) {
  return bindActionCreators(
    {
      ...Actions,
    },
    dispatch
  );
}

function mapStateToProps(state: any) {
  console.log("todo card: ", state);
  return {
    todocard: state,
  };
}

const connector = connect(mapStateToProps, mapDispatchToProps);
export default connector(TaskModal);

Through this component I can invoke another component called "TaskModal" and pass "TodoListId as data.todoListId" to it "Pass TodoListId to TaskModal"

singleList.tsx:

import { Card, CardContent, CardHeader, Grid } from "@material-ui/core";
import React from "react";
import { Todo } from "../../../../redux-store/reducers/todo-card-reducer";
import { useStyle } from "../../../../styles/list-styles";
import CardTodo from "../card/cardTodo";
import TaskModal from "../modals/task-modal";

interface in_SingleList {
  id?: number;
  title: string;
  todos?: Todo[];
}

const SingleList: React.FC<in_SingleList> = (data: in_SingleList) => {
  console.log("data inside single list: ", data);
  const classes = useStyle();
  return (
    <Grid className={classes.root}>
      {/* 1 */}
      <Grid item>
        <Grid container>
          {/* 1-1 */}
          <Grid item>
            <Card elevation={4} className={classes.card}>
              <Grid item>
                <Grid container>
                  <CardHeader
                    classes={{
                      title: classes.headerTitle,
                    }}
                    title={data.title}
                  ></CardHeader>
                </Grid>
              </Grid>
              {/* 1-1-1 */}
              <Grid item>
                <Grid container>
                  <CardContent>
                    <Grid container direction="column" spacing={3}>
                      {/* 1-1-1-1 */}
                      {data.todos?.map((t: Todo, index: number) => (
                        <Grid item key={index}>
                          <CardTodo title={t.title || ""} />
                        </Grid>
                      ))}
                    </Grid>
                  </CardContent>
                </Grid>
              </Grid>

              {/* 1-1-2 */}
              <Grid item className={classes.button}>
                <TaskModal />
              </Grid>
            </Card>
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  );
};

export default SingleList;

CodePudding user response：

Since you requested to edit your code, am trying my best. Since I don't know the entire context of what you are trying to achieve am trying to make minimal changes to make it work.

TastModal.tsx

import { Grid, Typography } from "@material-ui/core";
import React from "react";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import NotesIcon from "@material-ui/icons/Notes";
import SubtitlesIcon from "@material-ui/icons/Subtitles";
import useStyle from "../../../../styles/task-modal-style";
import AddIcon from "@material-ui/icons/Add";
import { bindActionCreators } from "redux";
import { Actions } from "../../../../redux-store/actions/actions";
import { connect } from "react-redux";
import { Todo } from "../../../../redux-store/reducers/todo-card-reducer";

interface OwnProps {
  todoListId: number;
  CreateCardAction: (title: string, content: string, id: number) => void;
}

interface StateProps {
  todocard: unknown; // Since I don't know your state
}

type Props = OwnProps & StateProps;

const TaskModal: React.FC<Props> = ({
  CreateCardAction,
  todocard,
  todoListId
}) => {
  console.log("todocard: ", todocard);
  const classes = useStyle();
  const [open, setOpen] = React.useState(false);

  const [title, setTitle] = React.useState("");
  const [content, setContent] = React.useState("");

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const handleSubmit = (e: { preventDefault: () => void }) => {
    e.preventDefault();
    CreateCardAction(title, content, todoListId);
    console.log("title inside list modal: ", title);
    handleClose()
  };

  return (
    <Grid>
      <Grid
        container
        direction="row"
        justifyContent="flex-start"
        alignItems="flex-end"
      >
        <Grid item>
          <Grid
            container
            direction="row"
            justifyContent="flex-start"
            alignItems="flex-end"
          >
            <Button
              onClick={handleClickOpen}
              className={classes.createTaskbutton}
              startIcon={<AddIcon style={{ fontSize: 17 }} />}
            >
              Create new task
            </Button>
          </Grid>
        </Grid>
      </Grid>
      <Grid
        container
        lg={12}
        xs={12}
        justifyContent="center"
        alignItems="center"
      >
        <Dialog
          classes={{ root: classes.root }}
          // className={classes.root}
          open={open}
          onClose={handleClose}
          aria-labelledby="form-dialog-title"
        >
          <Grid container direction="column">
            <Grid item>
              <Grid container direction="column">
                <Grid item>
                  <DialogTitle id="form-dialog-title">
                    <Grid container direction="column">
                      <Grid item>
                        <Grid container direction="row">
                          <Grid item>
                            <SubtitlesIcon className={classes.icon} />
                          </Grid>

                          <Grid item>
                            <Typography className={classes.text}>
                              Task Title
                            </Typography>
                          </Grid>
                        </Grid>
                      </Grid>
                      <Grid item>
                        <TextField
                          className={classes.titleField}
                          id="standard-basic"
                          value={title}
                          onChange={(e) => setTitle(e.target.value)}
                        />
                      </Grid>
                    </Grid>
                  </DialogTitle>
                </Grid>
                <Grid item>{/* llll */}</Grid>
              </Grid>
            </Grid>
            <Grid item>
              <DialogContent>
                <DialogContentText>
                  <Grid container direction="row">
                    <Grid item>
                      <NotesIcon className={classes.icon} />
                    </Grid>
                    <Grid item>
                      <Typography className={classes.text}>
                        Description
                      </Typography>
                    </Grid>
                  </Grid>
                </DialogContentText>
                <TextField
                  variant="outlined"
                  style={{ textAlign: "left" }}
                  multiline
                  rows={2}
                  className={classes.titleField}
                  value={content}
                  onChange={(e) => setContent(e.target.value)}
                />
              </DialogContent>
            </Grid>
            <Grid
              item
              container
              justifyContent="flex-start"
              alignItems="flex-end"
            >
              <DialogActions>
                <Button
                  variant="contained"
                  className={classes.button}
                  onClick={handleSubmit}
                >
                  Create Task
                </Button>
              </DialogActions>
            </Grid>
          </Grid>
        </Dialog>
      </Grid>
    </Grid>
  );
};

function mapDispatchToProps(dispatch: any) {
  return bindActionCreators(
    {
      ...Actions
    },
    dispatch
  );
}

function mapStateToProps(state: any): StateProps {
  console.log("todo card: ", state);
  return {
    todocard: state
  };
}

const connector = connect(mapStateToProps, mapDispatchToProps);
export default connector(TaskModal);

singleList.tsx

import { Card, CardContent, CardHeader, Grid } from "@material-ui/core";
import React from "react";
import { Todo } from "../../../../redux-store/reducers/todo-card-reducer";
import { useStyle } from "../../../../styles/list-styles";
import CardTodo from "../card/cardTodo";
import TaskModal from "../modals/task-modal";

interface in_SingleList {
  id: number;
  title: string;
  todos?: Todo[];
}

const SingleList: React.FC<in_SingleList> = (data: in_SingleList) => {
  console.log("data inside single list: ", data);
  const classes = useStyle();

  const handleCreateCard = (title: string, content: string, id: number) => {
    // Do what you want with the data
    console.log(title, content, id)
  }

  return (
    <Grid className={classes.root}>
      {/* 1 */}
      <Grid item>
        <Grid container>
          {/* 1-1 */}
          <Grid item>
            <Card elevation={4} className={classes.card}>
              <Grid item>
                <Grid container>
                  <CardHeader
                    classes={{
                      title: classes.headerTitle,
                    }}
                    title={data.title}
                  ></CardHeader>
                </Grid>
              </Grid>
              {/* 1-1-1 */}
              <Grid item>
                <Grid container>
                  <CardContent>
                    <Grid container direction="column" spacing={3}>
                      {/* 1-1-1-1 */}
                      {data.todos?.map((t: Todo, index: number) => (
                        <Grid item key={index}>
                          <CardTodo title={t.title || ""} />
                        </Grid>
                      ))}
                    </Grid>
                  </CardContent>
                </Grid>
              </Grid>

              {/* 1-1-2 */}
              <Grid item className={classes.button}>
                <TaskModal CreateCardAction={handleCreateCard} todoListId={data.id} />
              </Grid>
            </Card>
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  );
};

export default SingleList;