How to setState() using React-hooks of array of object

Question

How can I use React-hooks to setState() my array of objects so that I can display this in my editform to perform update action.

Any syggestion how can I do so with React-hooks .

Github link for code

//Blog.js

class Blogs extends Component{
    constructor(props) {
        super(props);
            this.state = {
                modal: false,
                updatable: false,
                justClicked: null,
                activePage: 1,
                requiredItem : null,
                _id: '',
                blog_short_desc: '',
                blog_name: ''

            };
            this.replaceModalItem = this.replaceModalItem.bind(this);
            this.onTodoChange = this.onTodoChange.bind(this);
        }

    static propTypes = {
        getBlog: PropTypes.func.isRequired,
        deleteBlog: PropTypes.func.isRequired,
        updateBlog: PropTypes.func.isRequired,
        resume: PropTypes.object.isRequired,
        auth: PropTypes.object.isRequired,
        loading: PropTypes.object.isRequired
    }

    toggle = (id) => {
        this.setState({
            modal: !this.state.modal
        });
    }

    componentDidMount() {
      this.props.getBlog();
    }

    replaceModalItem(id) {
        this.setState({
          modal: true,
          requiredItem: id
        });
    }

    onTodoChange = (e) => {
        this.setState({ 
            [e.target.name] : e.target.value 
        });
    }

    onSubmit = (e, id) => {
        //Perform edit submit
    }

    render(){
        return(
            <Container>
            <div> 
                    {/* edit card dialog */}
                    <EditBlog blogs={blogs} user={this.props.auth} onTodoChange={this.onTodoChange}  {...this.state} toggle={this.toggle} onSubmit={this.onSubmit}/>

                    <Grid style={{padding: 0}} id="todo">
                        {/* Grid of display list of blogs */}
                    </Grid>
                </div>
            </Container>
        ) 
   }
}

const mapStateToProps = (state) => ({
    resume: state.resume,
    auth: state.auth,
    loading: state.apiCallsInProgress > 0
});

export default connect(mapStateToProps, {getBlog, deleteBlog, updateBlog }) (Blogs);

//Edit.js

const EditBlog = ({ blogs, toggle, onTodoChange, onSubmit, ...state}) => {
    const itemsPerPage = 6; 
    let activeBlogs = blogs.slice (itemsPerPage * state.activePage - itemsPerPage, itemsPerPage * state.activePage);
    return( 
        <span>
            {activeBlogs.map(({ _id, blog_short_desc, blog_name }) => (
            <Modal 
                isOpen = {state.modal && state.requiredItem === _id}
                toggle = {()=>this.toggle(_id)}    
            >
                <ModalHeader toggle={toggle}  style={{fontWeight: "bold"}}>
                    Edit your blog {state.blog_name}
                </ModalHeader>
                <ModalBody>
                    <Form onSubmit={e => onSubmit(e, state._id )}>
                        <FormGroup>
                            <Label for="blogHeading">Blog Heading</Label>
                            <Input type="text" name="blog_short_desc" id="blogHeading" placeholder="Update one liner"
                            onChange={onTodoChange} value={blog_short_desc}/>
                            <Label for="blogName">Blog Name</Label>
                            <Input type="text" name="blog_name" id="blogName" placeholder="Update blog name"
                            onChange={onTodoChange} value={blog_name}/>

                            <Button
                                color="dark"
                                style={{marginTop: '2rem'}}
                                block
                            >Edit blog</Button>
                        </FormGroup>
                </Form>
                </ModalBody>
            </Modal>
            ))}
        </span>

    )
}

const mapStateToProps = state => ({
    resume: state.resume,
    auth: state.auth
})

export default connect(mapStateToProps, { updateBlog })(EditBlog);

//JsonArray

[
    {
        "_id": "5ea2efeec26f173008dcb80b",
        "blog_short_desc": "Hey tammy tammy",
        "blog_name": "sirirrrheyyy siri",
        "blog_desc": "hello",
        "blog_image_link": "",
        "blog_by": "5e9478c5b53c4735d4a5cdf1",
        "blog_by_author": "Tanmoy Sarkar",
        "date": "2020-04-24T13:55:58.818Z",
        "__v": 0
    },
    {
        "_id": "5e9f07d0c25ee11fc0a1260f",
        "blog_short_desc": "Hey tammy",
        "blog_name": "sirirrrheyyy siri",
        "blog_desc": "fsfsfdfdsgdfgfdgdg",
        "blog_image_link": "",
        "blog_by": "5e9478c5b53c4735d4a5cdf1",
        "blog_by_author": "Tanmoy Sarkar",
        "date": "2020-04-21T14:48:48.633Z",
        "__v": 0
    }
]

//Redux

//UI

Answer 1

You questions is rather vague. A little more clarification can help. I suppose you mean storing the son array in a state using the useState hook.

 const [array, setArray] = useState(null)
 setArray(jsonArray)